Trying to select menuItems in a seperate component - how to solve 'function components cannot be given refs' error?

I am trying to move my menuitems in a select field to a separate component, since I have to use the same menuitems twice it seemed the best way to just move them to a separate component. But it doesn't work like I would expect it to.

this works fine (since its in the same component):

<TextField
  select
  variant="outlined"
  fullWidth
  label="local menuitems"
  onChange={(e) => {
    console.log("Local running");
    setLocalValue(e.target.value);
  }}
  style={{ width: "100%" }}
  value={localValue}
>
    <MenuItem value="1">MenuItem 1</MenuItem>
    <MenuItem value="2">MenuItem 2</MenuItem>
    <MenuItem value="3">MenuItem 3</MenuItem>
</TextField> 

This doesnt (since its a separate component):

<TextField
  select
  variant="outlined"
  fullWidth
  label="External menuitems"
  onChange={(e) => {
    console.log("External running");
    setExternalValue(e.target.value);
  }}
  style={{ width: "100%" }}
  value={externalValue}
>
    <MenuItems />
</TextField> 

and MenuItems returns:

<Fragment>
  <MenuItem value="1">MenuItem 1</MenuItem>
  <MenuItem value="2">MenuItem 2</MenuItem>
  <MenuItem value="3">MenuItem 3</MenuItem>
</Fragment>

I made a CodePen https://codesandbox.io/s/infallible-wilson-u4so6?file=/src/App.js

The first example is using the menuitems locally, the second in a different component. The menuitems are shown correctly but they don't work, I also noticed that this error shows up

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

As Omer pointed out the menuItems need to be direct children, so i will need to use forwardRef, now I havent used forwardRef and ref's in general so how would i use this in my case? And if you happen to know how it would work if the MenuItems component is using redux connect() that would be awesome!