Reactjs 如何在物料界面react 的多选菜单中设置最大 Select 数限制

我有一个从material UI组件的多选菜单，我需要确保用户只能从该菜单 Select 三个选项，因为我需要发送该值作为props .现在，我应该做些什么来确保这一点？以下是我使用的代码:

<FormControl sx={{ m: 2, width: "100%" }}>
    <InputLabel id="demo-multiple-chip-label">Location</InputLabel>
    <Select
      labelId="demo-multiple-chip-label"
      id="demo-multiple-chip"
      multiple
      value={selectedLocations}
      onChange={handleChange}
      input={<OutlinedInput label="Location" />}
      
      renderValue={(selected) => (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
          {selected.map((value) => (
            <Chip key={value} label={value} />
          ))}
        </Box>
      )}
      MenuProps={MenuProps}
    >
      {locationList.map((location: string,index: number) => (
        <MenuItem
          key={index}
          value={location}
          style={getStyles(location, selectedLocations, theme2)}
        >
          {location}
        </MenuItem>
      ))}
    </Select>
</FormControl>

我要 Select 的选项将存储在selectedLocations中.现在，我该怎么做才能确保a user can not choose more than three options.

我在任何地方都找不到任何关于这方面的信息，包括MUI文档.

预期结果:仅从列表中 Select 三个选项

Link to how the dropdown looks in general个