Реагирующие хуки setState неправильно перерисовывают компонент

У меня есть компонент (переключатель списка меню), который должен загружать дочерний компонент (переключать элементы меню) при нажатии кнопки.

Вот как это работает.

Начальное состояние 'btnId' = ноль

-> нажатие кнопки

-> обновить состояние до индекса номер 1

-> (btnId !== null) && загрузить дочерний компонент

Однако дочерний компонент не отображается при обновлении состояния.

Если я устанавливаю состояние инициализации равным 1, оно отображается при нажатии кнопки.

toggleMenuList.js

import React, { useState, useRef } from 'react';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
/* --- Components --- */
import Loader from '../../shared/loader';

const ToggleMenuItems = Loader({
  loader: () =>
    import('./toggleMenuItems' /* webpackChunkName: 'ToggleMenuItems' */),
});

const styles = theme => ({
...
});

const ToggleMenuList = ({ navAdminList, navAdminItems, classes }) => {
  const [open, setOpen] = useState(false);
  const [btnId, setBtnId] = useState(null);
  const anchorRef = useRef(null);

  const handleToggle = async id => {
    await setBtnId(id);
    return setOpen(prevOpen => !prevOpen);
  };

  const handleClose = event => {
   ...
  };

  console.info('Toggle Menu List is rendered');
  console.info('btnId: ', btnId);

  return (
    <React.Fragment>
      <div className = {`nav-menu ${classes.root}`}>
        {navAdminList.map(e => (
          <Button
            key = {e.id}
            ref = {anchorRef}
            aria-owns = {open ? 'menu-list-grow' : undefined}
            aria-haspopup = "true"
            onClick = {() => handleToggle(e.id)}
            className = {e.className}
          >
            {e.name}
          </Button>
        ))}
      </div>
      {btnId !== null && (
        <ToggleMenuItems
          handleClose = {handleClose}
          open = {open}
          anchorRef = {anchorRef}
          items = {navAdminItems[btnId]}
        />
      )}
    </React.Fragment>
  );
};

export default withStyles(styles)(ToggleMenuList);

toggleMenuItems.js

const ToggleMenuItems = ({ handleClose, open, anchorRef, items }) => {

  console.info('Toggle Menu Items is rendered.');
  console.info('open: ', open);

  return (
    <Popper
      open = {open}
      anchorEl = {anchorRef.current}
      keepMounted
      transition
      disablePortal
    >
      {({ TransitionProps, placement }) => (
        <Grow
          {...TransitionProps}
          style = {{
            transformOrigin:
              placement === 'bottom' ? 'center top' : 'center bottom',
          }}
        >
          <Paper id = "menu-list-grow">
            <ClickAwayListener onClickAway = {handleClose}>
              <MenuList>
                {items.map(e => (
                  <MenuItem key = {e.id} onClick = {handleClose}>
                    <Link to = {e.to} className = {e.className}>
                      {e.name}
                    </Link>
                  </MenuItem>
                ))}
              </MenuList>
            </ClickAwayListener>
          </Paper>
        </Grow>
      )}
    </Popper>
  );
};

export default ToggleMenuItems;

Вот журналы консоли, которые я получаю.

* On page load
toggleMenuList.js:  Toggle Menu List is rendered
toggleMenuList.js:  btnId:  null

* On button click
toggleMenuList.js:  Toggle Menu List is rendered
toggleMenuList.js:  btnId:  1
toggleMenuList.js:  Toggle Menu List is rendered
toggleMenuList.js:  btnId:  1

toggleMenuItems.js: Toggle Menu Items is rendered.
toggleMenuItems.js: open: true

результат

• Значение состояния обновляется.

• Дочерний компонент, кажется, загружен. (console.info запускается)

• Но он не отображается.