Reactjs 位于组件materialui中的TextField中的 map 功能不起作用

如果位于组件Material-UI中，则Textfield中的贴图函数不起作用

我有两个文本字段，第一个单选按钮工作，第二个单选按钮不工作.如果 map 功能位于单独的组件中使用单选按钮怎么办？ 如果您try 替换第一个示例中的值，它将正确更改，而在第二个示例中则不起作用.唯一的区别是，在第二个示例中，映射是一个单独的文件

https://codesandbox.io/s/green-snow-bmbcn2?file=/src/Test.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import MapCastom from "./MapCastom";

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "฿"
  },
  {
    value: "JPY",
    label: "¥"
  }
];

export default function SelectTextFields() {
  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          defaultValue="EUR"
          helperText="Please select your currency"
        >
          {currencies.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>

      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          defaultValue="EUR"
          helperText="Please select your currency"
        >
          <MapCastom data={currencies} />
        </TextField>
      </div>
    </Box>
  );
}


import React from "react";
import MenuItem from "@mui/material/MenuItem";

const MapCastom = ({ data }) => {
  return (
    <>
      {data.map((option) => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
    </>
  );
};

export default MapCastom;