为什么更新的状态没有返回到我的组件?

我有一个 drawer 对于我的移动导航,当我点击抽屉图标时,它可以正常打开和关闭。但我试图实现点击/点击关闭来关闭导航栏。因此,当用户点击或点击导航栏时,它应该关闭。但我在抽屉关上的时候窃听错误,因为 ref 页面中缺少。所以我想用一张支票看看抽屉是否通过运行打开了 if (drawerIsOpen) { do...} else { dont...} 奇怪的是我没有收到道具的更新状态。抽屉本应关闭和打开,但当我 console.log(drawerIsOpen) 它从未给出正确的状态。下面的代码应该解释一下我的意思。

const Drawer = ({ drawerIsOpen, handleDrawer, drawerButtonRef }) => {
  const drawerRef = useRef(null);

  function handleClickOutside(event) {
    if (!drawerIsOpen) {
      // always returns since state is always telling me the drawer is closed
      return;
    }
    if (drawerRef.current.contains(event.target)) {
      console.log('inside');
    } else {
      console.log('outside');
      console.log(handleDrawer);
      handleDrawer();
    }
}
useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    document.addEventListener('touchstart', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('touchstart', handleClickOutside);
    };
  }, []);

我的状态是通过道具发送的。我的状态从以下组件开始:

const drawerButtonRef = useRef(null);

const [drawerIsOpen, setDrawerIsOpen] = useState(false);
const handleDrawer = () => {
    setDrawerIsOpen((prevState) => !prevState);
};

return (
  <>
    <Drawer
        drawerIsOpen={drawerIsOpen}
        handleDrawer={handleDrawer}
        drawerButtonRef={drawerButtonRef}
     />
  </>
)