reactjs - MUI Select カスタム MenuItem が正しく機能しない

Question

MenuItemMUI を別のコンポーネントと組み合わせてSelectレンダリングすると、MUI に関する問題が発生します。

コードサンドボックスはこちら

基本的に、私は次のようなものを持っています：

import { Select } from "@material-ui/core";
import CustomMenuItem from "./CustomMenuItem";
import React from "react";

export default function App() {
  const userIds = [1, 2, 3];
  return (
    <Select
      id="user"
      name="User"
      onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
        alert(event.target.value as number);
      }}
    >
      {userIds.map((userId) => (
        <CustomMenuItem key={userId} userId={userId} />
      ))}
    </Select>
  );
}

そして、これはカスタム項目です:

import { MenuItem, Typography } from "@material-ui/core";
import React from "react";

interface CustomMenuItemProps {
  userId: number;
}

const CustomMenuItem = React.forwardRef<HTMLLIElement, CustomMenuItemProps>(
  (props: CustomMenuItemProps, ref) => {
    const { userId, ...rest } = props;
    return (
      <MenuItem value={userId} {...rest} ref={ref}>
        <Typography>{userId}</Typography>
      </MenuItem>
    );
  }
);
export default CustomMenuItem;

最初は ref なしでこれを実行しましたが、コンソールにエラーが表示されたWarning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?ので ( )、しばらくグーグルで調べたところ、この ref を渡す必要があることがわかりました。...restまた、小道具が必要であることを理解しているので、小道具のも渡しMenuItemます。

予想される動作: をクリックするとMenuItem、コンポーネントで選択されSelectます。

実際の動作: 何も起こりません。

問題は、CustomMenuItem再利用可能にするために を作成したことです。しかし、その前に、次のような単純な関数がありました。これは inと in のrenderItem両方で使用し、同じコードで、同じ JSX ツリーを返しました。そして、それはうまくいきましたが、何らかの理由で今はうまくいきません。だから私がするなら：Select.renderValueuserIds.mapCustomMenuItem

    <Select
      id="user"
      name="User"
      onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
        alert(event.target.value as number);
      }}
    >
      {userIds.map((userId) => (
        <MenuItem key={userId} value={userId}>
          <Typography>{userId}</Typography>
        </MenuItem>
      ))}
    </Select>

それは単に動作します:(

ここで何か不足していますか？