Replacing my layout React Context with a Zustand store #1590

Question

I have a context for the layout of my React app that utilizes a hook for finding out the current window size. Here's the gist of it:

export const LayoutContext = createContext({
  menuIsOpen: false,
  setMenuIsOpen: (isOpen: boolean) => {},
  overlayIsOpen: false,
  setOverlayIsOpen: (isOpen: boolean) => {},
  isMobile: false,
  isTablet: false,
  isLaptop: false,
  isDesktop: false,
});

export default function LayoutProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const context = useLayoutContext();
  return (
    <LayoutContext.Provider value={context}>{children}</LayoutContext.Provider>
  );
}

function useLayoutContext() {
  const windowSize = useWindowSize();

  const isMobile = windowSize.width <= Breakpoint.MEDIUM; // <= 768
  ...
  ...
  // Initial load of page layout. If <=1024px neither chat or menu is open by default.
    useEffect(() => {
    const isMobileDevice = window.innerWidth <= Breakpoint.MEDIUM;
    const isLargeDevice = window.innerWidth >= Breakpoint.LARGE;
    const isDesktopDevice = window.innerWidth >= Breakpoint.EXTRA_LARGE;

    if (isMobileDevice) {
      setShowMobileNavigation(true);
    }

    if (isDesktopDevice) {
      setMenuIsOpen(true);
    }
  }, []);

There's a bit more code but these are the important parts. I'm looking to replace this with a global Zustand store but I'm having trouble understand exactly how to do it. Where would I use the useWindowSize? And where would I use the initial useEffect to decide the layout?

Appreciate any and all help!