How to use the react-use.useLockBodyScroll function in react-use

const Header = ({
  theme: headerTheme = defaultHeaderTheme,
  innerRef,
  ...rest
}) => {
  const [hovered, bind] = useHover()
  const [subnavVisible, setSubnavVisibility] = useState(null)

  const [items, setItems] = useState([])
  const [mobileMenuOpen, setMobileMenuState] = useState(false)
  const isMobile = useMedia(1)

  useLockBodyScroll(isMobile && mobileMenuOpen)

  const handleMenuToggle = () => {
    setMobileMenuState((s) => !s)
  }

  const handleSetItems = (i) => {
    const theItems =
      (subnavVisible &&
        navigation.find((item) => item.slug === subnavVisible).items) ||
      []
    setItems(theItems)
  }

  useEffect(() => {
    if (!isMobile) {
      if (subnavVisible && !hovered) {

const Modal = ({ ...rest }) => {
  const { src, open, ref, handleClose } = useModalHooks()
  useLockBodyScroll(open)
  return (

export const HeadersNavigation: React.FunctionComponent = ({
  enableSmoothScroll = false,
  children = null,
}) => {
  const { showMobileRightNav } = useContext(GenericDocsContext);
  const headersWrapperRef = useRef();
  const [locked, toggleLocked] = useToggle(false);
  useLockBodyScroll(locked);

  const onMouseEnter = () => {
    toggleLocked(true);
  };

  const onMouseLeave = () => {
    toggleLocked(false);
  };

  return (