How to use the @react-md/utils.useScrollLock function in @react-md/utils

if (visible !== isDesktop) {
      setVisible(isDesktop);
    }
    // disabled since only want to update on media changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDesktop, isTablet, isPhone]);

  useEffect(() => {
    if (visible && !inline) {
      setVisible(false);
    }
    // disabled since only want to run on pathname changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router.pathname]);

  useScrollLock(visible && isPhone);
  let title = propTitle;
  if (propTitle.includes(" - ")) {
    title = title.substring(title.indexOf(" - ") + 3);
    if (isPhone && !router.pathname.includes("/packages/")) {
      const i = title.lastIndexOf("- ");
      if (i !== -1) {
        title = title.substring(i + 2);
      }
    }
  }

  // this makes it so that the SkipToMainContent button can still
  // focus the `<main>` element, but the `<main>` will no longer be
  // focused if the user clicks inside. This is super nice since one
  // of my bigger patterns is to click somewhere then press tab to
  // focus a specific element. Without this fix, the first element in</main></main>

onKeyDown,
    ...props
  } = providedProps as WithDefaultProps;
  const { id } = props;
  const isNoneRole = role === "none";
  const isFullPage = type === "full-page";
  const isCentered = type === "centered";

  const { disableOverlay, disableEscapeClose } = useNestedDialogFixes({
    id,
    visible,
    disabled: disableNestedDialogFixes,
    disableEscapeClose: propDisableEscapeClose,
  });

  useScrollLock(visible && !isNoneRole && !disableScrollLock);

  let overlayEl: ReactNode = null;
  if (typeof propOverlay === "boolean" ? propOverlay : !isFullPage) {
    // do not add the portal props to the overlay element since the portalling
    // is handled in here. With how portals work, this would be rendered **after**
    // the dialog instead of before which breaks some dialog styles
    overlayEl = (

if (visible !== isDesktop) {
      setVisible(isDesktop);
    }
    // disabled since only want to update on media changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDesktop, isTablet, isPhone]);

  useEffect(() => {
    if (visible && !inline) {
      setVisible(false);
    }
    // disabled since only want to run on pathname changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router.pathname]);

  useScrollLock(visible && isPhone);
  let title = propTitle;
  if (propTitle.includes(" - ")) {
    title = title.substring(title.indexOf(" - ") + 3);
    if (isPhone && !router.pathname.includes("/packages/")) {
      const i = title.lastIndexOf("- ");
      if (i !== -1) {
        title = title.substring(i + 2);
      }
    }
  }

  // this makes it so that the SkipToMainContent button can still
  // focus the `<main>` element, but the `<main>` will no longer be
  // focused if the user clicks inside. This is super nice since one
  // of my bigger patterns is to click somewhere then press tab to
  // focus a specific element. Without this fix, the first element in</main></main>