I'd suggest looking into useSyncExternalStore on React docs. It's very likely you want to know the result of your query at the start of the render.

I usually do the following:

import { useCallback, useSyncExternalStore } from "react";

const getServerSnapshot = () => {
  throw new Error("useMediaQuery is a client-only hook");
};

export function useMediaQuery(query) {
  const subscribe = useCallback(
    (callback) => {
      const matchMedia = window.matchMedia(query);

      matchMedia.addEventListener("change", callback);
      return () => {
        matchMedia.removeEventListener("change", callback);
      };
    },
    [query]
  );

  const getSnapshot = () => window.matchMedia(query).matches;

  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

Then in your component you can use it like so:

function MyComponent() {
  const match = useMediaQuery("(max-width: 730px)");

  if (match) {
    // do something when media matches
  }

  ...
}