Функциональный компонент не рендерится после изменения состояния.

Question

Я использую функциональные компоненты, и по некоторым причинам, которые не понимают, состояние не меняется, и, следовательно, компонент не перерисовывается сам. Пробовали разные способы написания onChange, которые изменяют состояние, используя setAccountKey и даже используя setAccountKey с prevState.

export default function Table() {
  const [accountKey, setAccountKey] = useState({value: 1});

useEffect(() => {
       const queryStringData = accountKey.value ? `?accountKey=${accountKey.value}` : '';
  const options = {
    url:  `https://xxxx/data${queryStringData}`,
    headers: {
      'Accept-Encoding': 'gzip, deflate',
      'Authorization': `Bearer ${sessionStorage.getItem('token')}`
    },
    encoding: null
  };
}



 return (
  <div style={{
    marginTop: '46px',
  }}>
    <FormControl variant="outlined">
      <Select
        id="demo-simple-select-outlined"
        value={accountKey.value}
        onChange={(event) => {
          setAccountKey(...event.target.value);
          console.log(accountKey);
        }}
        label="accountKey"
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
   </div>
  );
}

Идея состоит в том, чтобы использовать состояние accountKey для изменения и запроса новой информации. Я полностью потерян.