TextField in MenuItem causes nextFocus.getAttribute is not a function

Question

I have created a Menu with Material UI that pops up when a button gets clicked. This Menu displays a dynamic list of id's that can get filtered with a Textfield positioned at the top of the Menu. But when I'm typing inside of the textfield I get the error: Uncaught TypeError: nextFocus.getAttribute is not a function.
I have no Idea what could cause this issue and how it can be resolved.

This is the code of my SearchableFilter component that is shown on the image above. I have removed some unnecessry styling in the code

const SearchableFilter = ({ values, label, setState, state }) => {
  const classes = useStyles();
  const [focused, setFocused] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [searchValue, setSearchValue] = useState("");

  const openMenu = (event) => {
    setFocused(true);
    setAnchorEl(event.currentTarget);
  };

  const selectItem = (value) => {
    handleClose();
    setState(value);
  };

  const handleDelete = () => {
    setState("");
  };

  const handleChange = (event) => {
    return setSearchValue(event.target.value);
  };

  const filteredValues = values.filter((value) =>
    value.includes(searchValue.trim())
  );

  const handleClose = () => {
    setFocused(false);
    setAnchorEl(null);
  };

  return (
    <div className={classes.margin}>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={openMenu}
        disableRipple
        endIcon={<ArrowDropDownIcon color={state && "primary"} />}
      >
        {label}
      </Button>
      <Menu
        id="menu-appbar"
        anchorEl={anchorEl}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        open={Boolean(anchorEl)}
        elevation={2}
        onClose={handleClose}
      >
        <MenuItem
          button={false}
          dense={true}
          key="input"
          className={classes.menuItem}
        >
          <TextField
            id="input"
            label="Search"
            value={searchValue}
            onChange={handleChange}
          />
        </MenuItem>
        <List style={{ maxHeight: "300px", overflow: "auto" }}>
          {filteredValues.map((value) => (
            <MenuItem
              key={value}
              dense={true}
              className={classes.menuItem}
              disableGutters={true}
              onClick={() => selectItem(value)}
            >
              {value}
            </MenuItem>
          ))}
        </List>
      </Menu>
    </div>
  );
};

Full error:

Uncaught TypeError: nextFocus.getAttribute is not a function
    at moveFocus (MenuList.js:76)
    at handleKeyDown (MenuList.js:188)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Edit:

Here is a CodeSandBox that displays the error:

Answer 1

Answer provided by @Ryan Cogswell in the comments.

Adding the onKeyDown prop to the parent MenuItem of the TextField fixed my issue.

<MenuItem
  button={false}
  onKeyDown={e => e.stopPropagation()}
>
  <TextField
    onChange={handleChange}
   value={value}
  />
</MenuItem>