TextField в MenuItem - событие onKeyDown, мешающее onChange в TextField

Question

Я пытаюсь поместить TextField в меню. Он работает по большей части, за исключением того, что текстовое поле пустое, и я нажимаю клавишу «d» вместо того, чтобы вызвать событие onChange, оно переходит к следующему пункту меню в списке.

Я пытался передать в меню событие onKeyDown и вызвать event.stopPropagation () и предотвращать дефолт, но я думаю, что это в MenuList, а не в меню.

function UserRequests(props) {
    const [anchorEl, setAnchorEl] = React.useState(null)
    const [filter, setFilter] = useState('')

    const handleClick = e => setAnchorEl(e.currentTarget)
    const handleClose = () => setAnchorEl(null)

    const filteredUsers = props.pending.filter(x =>
        x.user.name.includes(filter)
    )

    const handleFilterChange = e => {
        e.preventDefault()
        e.stopPropagation()
        setFilter(e.target.value)
    }

    return (
        <Fragment>
            <Badge
                color="secondary"
                badgeContent={props.pending.length}
                invisible={props.pending.length < 1}
            >
                <Button
                    aria-controls="simple-menu"
                    aria-haspopup="true"
                    onClick={handleClick}
                    variant="outlined"
                    color="primary"
                    className={props.classes.button}
                >
                    Pending Requests
                </Button>
            </Badge>
            <Menu
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
            >
                <MenuItem button={false}>
                    <TextField
                        label="Filter"
                        value={filter}
                        fullWidth
                        onChange={handleFilterChange}
                    />
                </MenuItem>
                {props.pending.length > 0 ? (
                    filteredMemebers.map(({ id, user }) => (
                        <MenuItem key={id} button={false}>
                            {user.name}
                            <ApproveUserButton
                                id={id}
                                domain={props.domain}
                            />
                            <RemoveUserButton
                                id={id}
                                domain={props.domain}
                            />
                        </MenuItem>
                    ))
                ) : (
                    <MenuItem button={false}>No Pending Users</MenuItem>
                )}
            </Menu>
        </Fragment>
    )
}

Ожидаемый результат: я набираю текстовое поле, и оно обрабатывает обычно

Фактически: когда я набираю текстовое поле, некоторые обработчики нажимают клавиши до того, как они нажимают на мой handleFilterChange