Как выполнять функции с анимацией вместе с dispatch?

Question

[Alexander]

Подскажите пожалуйста, есть мобильное меню и в нем кнопка регистрациии, как я могу при нажатии на нее закрыть меню и выполнить диспатч по открытию модального окна только после того как функия onClose полностью выполнится?
Буду очень благодарен за помощь

export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
  const [activeMenu, setActiveMenu] = React.useState('main')
  const [menuHeight, setMenuHeight] = React.useState<number | undefined>(undefined)
  const match = useMediaQuery({ maxWidth: '576px' })
  const dispatch = useDispatch()
  useHideScrollbar(isOpen)

  const calcHeight = (el: HTMLElement) => {
    const height = el.offsetHeight
    setMenuHeight(height)
  }

  const handleClose = () => {
    onClose()
    dispatch(
      showModal({
        modalType: 'register',
        modalProps: {
          title: 'BECOME A NIKE MEMBER',
          description:
            'Create your Nike Member profile and get first access to the very best of Nike products, inspiration and community.',
          logo: true,
        },
      })
    )
  }

  return (
    <>
      <CSSTransition in={isOpen} unmountOnExit timeout={300} classNames='overlay'>
        <MenuOverlay onClick={onClose} />
      </CSSTransition>
      <CSSTransition in={isOpen} unmountOnExit timeout={300} classNames='menu' onEnter={calcHeight}>
        <Menu menuHeight={menuHeight}>
          <CSSTransition
            in={activeMenu === 'main'}
            timeout={500}
            classNames='menu-primary'
            unmountOnExit
            onEnter={calcHeight}
          >
            <InnerMenu>
              {match && <NavbarIcons onClose={onClose} />}
              {NavbarData.map((item, inx) => {
                return (
                  <MenuNavItem key={`menuLink${inx}`}>
                    <MenuNavRef onClick={onClose} to={item.path} activeClassName='any' exact>
                      {item.title}
                    </MenuNavRef>
                  </MenuNavItem>
                )
              })}

              {peopleCategory.map((item, inx) => (
                <MenuNavItem key={`title-mobile-menu${inx}`} onClick={() => setActiveMenu(item.activeMenu)}>
                  <span>{item.title}</span>
                  <HiOutlineChevronRight />
                </MenuNavItem>
              ))}

              <Flex justify='space-between'>
                <Button variant='primary' onClick={handleClose}>
                  Join Us
                </Button>
                <Button>Sign In</Button>
              </Flex>
            </InnerMenu>
          </CSSTransition>

          {peopleCategory.map((item, inx) => (
            <MenuItem
              key={`menu-item-${inx}`}
              activeMenu={activeMenu === item.activeMenu}
              calcHeight={calcHeight}
              arrLinks={item.arrLinks}
              onBack={() => setActiveMenu('main')}
              onClose={onClose}
            />
          ))}
        </Menu>
      </CSSTransition>
    </>
  )
}

interface MenuItemProps {
  activeMenu: boolean | undefined
  calcHeight: (el: HTMLElement) => void
  arrLinks: Array<HeroLinks>
  onBack: () => void
  onClose: () => void
}

const MenuItem: React.FC<MenuItemProps> = ({ activeMenu, calcHeight, arrLinks, onBack, onClose }) => {
  return (
    <CSSTransition in={activeMenu} unmountOnExit timeout={400} classNames='menu-secondary' onEnter={calcHeight}>
      <InnerMenu>
        <MenuNavHeader onClick={onBack}>
          <HiOutlineChevronLeft />
          <span>Back</span>
        </MenuNavHeader>
        {arrLinks.map((item, inx) => {
          return (
            <MenuNavItem key={`menuTypeLink${inx}`}>
              <MenuNavRef onClick={onClose} to={item.path} activeClassName='any'>
                {item.title}
              </MenuNavRef>
            </MenuNavItem>
          )
        })}
      </InnerMenu>
    </CSSTransition>
  )
}