react TS media query hooks

import {useEffect, useState} from "react";
import {firstToUppercase} from "../utils/js";

export const breakpoints = {
  xs: "0px",
  sm: "600px",
  md: "960px",
  lg: "1280px",
  xl: "1920px",
};

export const query = Object.entries(breakpoints).reduce(
  (acc, [breakpoint, value]) => {
    acc[breakpoint] = `@media screen and (min-width: ${value})`;

    acc[`useQuery${firstToUppercase(breakpoint)}`] = () => {

      // eslint-disable-next-line react-hooks/rules-of-hooks
      const [matches, setMatches] = useState(true);

      // eslint-disable-next-line react-hooks/rules-of-hooks
      useEffect(() => {
        if (typeof window === undefined) return () => {};

        const mediaQuery = window.matchMedia(`screen and (min-width: ${value})`);
        const listener = ev => {
          setMatches(ev.matches);
        };
        mediaQuery.addEventListener("change", listener);

        return () => {
          mediaQuery.removeEventListener("change", listener);
        }
      }, []);

      return matches;
    };


    return acc;
  },
  {} as {
    [K in keyof typeof breakpoints]: `@media screen and (min-width: ${typeof breakpoints[K]})`;
  } & {[K in keyof typeof breakpoints as `useQuery${Capitalize<K>}`]: () => boolean;}
);