Safari: requestFullscreen is not a function

import { useCallback, useLayoutEffect, useState } from "react";

function isLeaving() {
  return (
    !document["fullscreenElement"] &&
    !document["webkitFullscreenElement"] &&
    !document["mozFullscreenElement"] &&
    !document["msFullscreenElement"]
  );
}

export default function useFullscreen(
  ref: React.MutableRefObject<HTMLDivElement>
): {
  isFullscreen: boolean;
  openFullscreen: () => void;
  closeFullscreen: () => void;
} {
  const [fullscreen, setFullscreen] = useState(false);
  const [isFullscreenReady, setIsFullscreenReady] = useState(false);

  useLayoutEffect(() => {
    document.onfullscreenchange = () => {
      if (isLeaving()) {
        setFullscreen(false);
        setIsFullscreenReady(false);
      }
    };
    return () => (document.onfullscreenchange = undefined);
  }, [fullscreen, isFullscreenReady, ref]);

  const openFullscreen = useCallback(() => {
    if (ref.current) {
      ref.current
        .requestFullscreen()
        .then(() => setIsFullscreenReady(true))
        .catch(() => setIsFullscreenReady(false));
    }
  }, [ref]);

  const closeFullscreen = useCallback(() => {
    document.exitFullscreen();
    setFullscreen(false);
    setIsFullscreenReady(false);
  }, []);

  return {
    isFullscreen: isFullscreenReady,
    openFullscreen,
    closeFullscreen,
  };
}