Javascript React：MUI 中的条件下拉菜单

我有两个硬编码了下拉列表的MUI下拉列表.我需要根据从第一个下拉列表中 Select 的内容填充第二个下拉列表

const [queryType, setqueryType] = React.useState('');
const [subCategory, setsubCategories] = React.useState('');

const handleQueryTypeDropdownChange = (event) => {
    const {
      target: { value },
    } = event;
    setqueryType(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : value,
    );
};
const handleSubCategoryDropdownChange = (event) => {
    const {
      target: { value },
    } = event;
    setsubCategories(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : value,
    );
};

const queryTypes = ['X', 'Y', 'Z'];
const subTypes = {X: ['AA', 'AAA'],
                  Y: ['B', 'BBB'],
                  Z: ['CC', 'CCC]};



<FormControl sx={{ m: 0, minWidth: '100%' }}>
    <InputLabel id="demo-simple-select-helper-label1">Query Type</InputLabel>
    <Select
      labelId="Query Type"
      id="queryType"
      value={queryType}
      onChange={handleQueryTypeDropdownChange}
      input={<OutlinedInput label="Query Type" />}
    >
      {queryTypes.map((queryType) => (
        <MenuItem
          key={queryType}
          value={queryType}
        >
        {queryType}
        </MenuItem>
      ))}
    </Select>
</FormControl>

<FormControl sx={{ m: 0, minWidth: '100%' }}>
<InputLabel id="demo-simple-select-helper-label1">Sub Type</InputLabel>
<Select
  labelId="Sub type"
  id="subCategory"
  value={subCategory}
  onChange={handleSubCategoryDropdownChange}
  input={<OutlinedInput label="Sub Category" />}
>
  **// need to do subTypes.A if the queryType is selected as 'A'**
  {subTypes.A.map((queryType) => (
    <MenuItem
      key={queryType}
      value={queryType}
    >
    {queryType}
    </MenuItem>
  ))}
</Select>
</FormControl>

如果有一种方法，我可以根据 Select 的queryType下拉值填充JSON中的subCategory下拉列表.

// need to do subTypes.A if the queryType is selected as 'A'个

谢谢,