Javascript 物料界面无法获取不同语言的多个选择值

我的问题是： 我在react with Material UI中使用网站上的所有代码设置了MultipleSelect组件； 问题是MenuItem被映射到这个常量main，它是一个带有字符串的数组。 但是，只要我试图获得不同语言的前端值和英语的handleChange值，我就面临一个问题。我需要select在前端显示不同的语言，但给我一个数组，以便用英语进行开发，所以我想也许我可以解决const name是一个具有两个属性的对象数组，一个带有英语关键字second-另一种语言。。。不能这样做。。。尝试了很多东西

代码如下：

import React from "react";
import "../index.css";
import "../App.css";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";
import Checkbox from "@material-ui/core/Checkbox";
import Chip from "@material-ui/core/Chip";
import map from "./maps-content/dots.json";

const useStyles = makeStyles((theme) => ({
  select: {
    "&:before": {
      borderColor: "red",
    },
    "&:after": {
      borderColor: "red",
    },
  },
  formControl: {
    margin: theme.spacing(1),
    fontFamily: "inherit",
    minWidth: 120,
    maxWidth: 300,
    margin: 0,
    fullWidth: true,
    display: "flex",
    wrap: "nowrap",
  },
  chips: {
    display: "flex",
    flexWrap: "wrap",
  },
  chip: {
    margin: 2,
  },
  noLabel: {
    marginTop: theme.spacing(3),
  },
}));

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  { name: "საქართველო", value: "Georgia" },
  { name: "აფხაზეთი", value: "abkhazia" },
 
];

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium,
  };
}

export default function MultipleSelect() {
  const classes = useStyles();
  const theme = useTheme();
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    setPersonName(event.target.value);
    console.log(event.target);
  };

  const handleChangeMultiple = (event) => {
    const { options } = event.target;
    const value = [];
    for (let i = 0, l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    setPersonName(value);
  };
  console.log(personName);
  return (
    <FormControl className={classes.formControl}>
      <InputLabel id="demo-mutiple-chip-label">აირჩიე რეგიონი</InputLabel>
      <Select
        labelId="demo-mutiple-chip-label"
        id="demo-mutiple-chip"
        multiple
        autoWidth={true}
        value={personName}
        onChange={handleChangeMultiple}
        input={<Input id="select-multiple-chip" />}
        renderValue={(selected) => (
          <div className={classes.chips}>
            {selected.map((value) => (
              <Chip key={value} label={value} className={classes.chip} />
            ))}
          </div>
        )}
        MenuProps={MenuProps}
      >
        {names.map((name) => (
          <MenuItem
            key={name.name}
            alt={name.value}
            value={name.name}
            style={getStyles(name.name, personName, theme)}
          >
            {name.name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

从“React”导入React；
导入“./index.css”；
导入“./App.css”；
从“@material ui/core/styles”导入{makeStyles，useTheme}”；
从“@material ui/core/Input”导入输入；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/core/Select”导入选择；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Chip”导入芯片；
从“/maps content/dots.json”导入地图；
const useStyles=makeStyles（（主题）=>({
选择：{
“&：之前”：{
边框颜色：“红色”，
},
“&：之后”：{
边框颜色：“红色”，
},
},
表单控制：{
边距：主题。间距（1），
fontFamily：“继承”，
最小宽度：120，
最大宽度：300，
保证金：0，
全宽：对，
显示：“flex”，
包装：“nowrap”，
},
芯片：{
显示：“flex”，
柔性包装：“包装”，
},
芯片：{
差额：2，
},
诺拉贝尔：{
marginTop：主题。间距（3），
},
}));
const ITEM_HEIGHT=48；
const ITEM_PADDING_TOP=8；
常量MenuProps={
纸质道具：{
风格：{
最大高度：项目高度*4.5+项目填充顶部，
宽度：250，
},
},
};
常量名称=[
{名称：საქართველო", 值：“格鲁吉亚”}，
{名称：აფხაზეთი“，值：“阿布哈兹”}，
];
函数getStyles（名称、人名、主题）{
返回{
容重：
personName.indexOf（name）=-1
？主题。版式。字体
：theme.typography.fontWeightMedium，
};
}
导出默认函数MultipleSelect（）{
const classes=useStyles（）；
const theme=useTheme（）；
const[personName，setPersonName]=React.useState（[]）；
常量handleChange=（事件）=>{
setPersonName（event.target.value）；
console.log（event.target）；
};
常量handleChangeMultiple=（事件）=>{
const{options}=event.target；
常量值=[]；
for（设i=0，l=options.length；i(
))}
)}
MenuProps={MenuProps}
>
{names.map（（name）=>(
{name.name}
))}
);
}

我怎样才能解决这个问题？ ppplllleaaaseeee