export function useCustomMediaQuery(mediaQuery: string): boolean {
  const [subscribe, getSnapshot] = useMemo(() => {
    const mediaQueryList = globalThis.matchMedia(mediaQuery);

    function subscribe(onStoreChange: () => void) {
      mediaQueryList.addEventListener("change", onStoreChange);
      return () => mediaQueryList.removeEventListener("change", onStoreChange);
    }

    function getSnapshot() {
      return mediaQueryList.matches;
    }

    return [subscribe, getSnapshot];
  }, [mediaQuery]);

  return useSyncExternalStore(subscribe, getSnapshot);
}

export const useMediaQuery = (): MediaQueryMatches => {
  const isMobile = useCustomMediaQuery(`(max-width: ${breakpoints.tablet - 1}px)`);
	// ...

  const matches = useMemo(() => {
    return {
      isMobile,
      // ...
    };
  }, [isMobile, ...]);

  return matches;
};