我有一個功能可以禁用下拉菜單，直到在其他兩個下拉菜單中做出選擇為止。我相信由于一些異步問題，它沒有正確啟用下拉菜單useState。const [homeSelect, setHomeSelect] = useState('Home');const [hedgeSelect, setHedgeSelect] = useState('Hedge');const [symbolSelect, setSymbolSelect] = useState('1');const handleHome = (event) => {    setHomeSelect(event.target.value);    exchange_change();  };const handleHedge = (event) => {  setHedgeSelect(event.target.value);  exchange_change();};const handleSymbol = (event) => {  setSymbolSelect(event.target.value);};const exchange_change = () => {  if (homeSelect != 'Home' && hedgeSelect != 'Hedge'){    //enable the symbol dropdown      setDisabled(false);  } else {      //disable the select exchanges dropdown      setDisabled(true);  }}<FormControl dense>  <TextField    id="standard-select-currency"    select    label="Home"    className={classes.textField}    value={homeSelect}    onChange={handleHome}    SelectProps={{      native: true,    }}    helperText="Please select exchange"  >    {home.map((option) => (      <option key={option.value} value={option.value}>        {option.label}      </option>    ))}  </TextField></FormControl><FormControl dense>  <TextField    id="standard-select-currency"    select    label="Hedge"    className={classes.textField}    value={hedgeSelect}    onChange={handleHedge}    SelectProps={{      native: true,    }}    helperText="Please select exchange"  >    {hedge.map((option) => (      <option key={option.value} value={option.value}>        {option.label}      </option>    ))}  </TextField></FormControl><FormControl dense>  <TextField    id="standard-select-currency"    select    label="Symbols"    className={classes.textField}    value={symbolSelect}    onChange={handleSymbol}    disabled={disabled}    SelectProps={{      native: true,    }}home下拉hedge菜單需要在啟用下拉菜單之前進行選擇symbol。錯誤是symbol下拉菜單直到之后才會啟用home并且hedge被選擇多次。如何更改我正在使用的方法useReducer（如果這可以解決狀態更新問題）？我嘗試閱讀它，但不明白我的開關盒是什么。