您可以向select添加一个onChange事件处理程序，它检查选定的索引并从选定的选项中检索id。

onChangeHandler = (e) => {
  const index = e.target.selectedIndex;
  const el = e.target.childNodes[index]
  const option =  el.getAttribute('id');  
}

<FormGroup>
  <label for='category' className='label'>Category</label>
  <select onChange={onChangeHandler}>
      {categories.map(category =>
          <option id={category.id}>
             {category.type}
          </option>
      )}
  </select>
</FormGroup>

理想情况下，您应该尽量避免从DOM获取状态。
如果您控制状态，并让React呈现您的状态，那么React会非常好地工作。
下面是一个简单的例子，基本上我所做的就是将状态索引存储到一个数组中。当我更新这个数组时，React视图也会相应地更新。如何存储状态完全取决于你，而不是DOM。

const {useState} = React;

const lookup = [
  {id: 1, value: 'one'},
  {id: 2, value: 'two'},
  {id: 3, value: 'three'}
];

function List() {
  const [selected, setSelected] = useState(-1); 
  const value = selected !== -1 && lookup[selected];
  return <div>
    <select 
      onChange={(e) => setSelected(e.target.value)}
      value={selected}>
      <option>Please Selected an option</option>
      {lookup.map((m, ix) => {
        return <option 
          key={m.id}
          value={ix}
        >
         {m.value}
        </option>
      })};
    </select>
    {value &&
    <div style={{marginTop: "2rem"}}>
      You selected ID <span>{value.id}</span>
      value
      <span>{value.value}</span>
    </div>}
   </div>;
}


ReactDOM.render(<List/>, document.querySelector('#mount'));

body, select, option {
 font-size: 20px;
}
select, option {
 padding: 0.5rem;
}
body {
  padding: 2rem;
}
span {
  font-weight: bold;
  margin: 1em;
  background-color: yellow;
  border: 1px solid black;
  padding: 1em 1.5rem;
  border-radius: 50%;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="mount"/>

我将编写一个示例代码，您可以使用或查看它来实现，只需将id作为值传递并设置state

<FormControl sx={{ m: 0, minWidth: 300 }} style={{"width": "100%", "marginTop":"20px",}}>
                          <InputLabel id="demo-multiple-chip-label">Select System Type</InputLabel>
                          <Select
                            labelId="demo-multiple-chip-label"
                            id="demo-multiple-chip"
                            multiple
                            value={systemTypeMultiple}
                            onChange={handleMultSelectDropDownSystemTypeChange}
                            input={<OutlinedInput id="select-multiple-chip" label="Select System Type" />}
                            renderValue={(selected) => (
                              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                                {selected.map((value) => (
                                  <Chip key={value} label={value} />
                                ))}
                              </Box>
                            )}
                            MenuProps={MenuProps}
                          >
                            {systemData ? systemData.map((system_types, index) => (
                              <MenuItem
                                key={system_types.system_type_id}
                                value={`${system_types.system_type_id} ${selectedSystemTypesId.push(system_types.name)}`}
                                // value={index}
                                style={getStyles(system_types.name, systemTypeMultiple, theme)}
                              >
                                {system_types.name}
                              </MenuItem>
                            )) : null}
                          </Select>
                        </FormControl>