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

const timeout = setTimeout(() => {
      setOpen(false);
    }, 100);

    setBlurTimeout(timeout);
  });

  const activeHandler = useCallback(() => {
    // Clear the blur timeout to prevent sub-navigation from disappearing when
    // the user navigates between elements.
    clearTimeout(blurTimeout);

    setOpen(true);
  });

  const location = useLocation();
  const highlighted = items.some(item =>
    location.pathname.startsWith(item.href),
  );

  return (
    
      
        {children}

const ExpandableMobileNavigationItem = ({ children, items, onNavigate }) => {
  const location = useLocation();
  const highlighted = items.some(item =>
    location.pathname.startsWith(item.href),
  );
  const [expanded, setExpanded] = React.useState(highlighted);
  const handleClick = () => setExpanded(!expanded);

  return (
    <>
      
        {children}
        {expanded ?  : }
      
      {expanded ? (
        
      ) : null}

function useRootService() {
  const [language, setLanguage] = useState("en");
  const { pathname, hash } = useLocation();

  useEffect(() => {
    if (!window.__GATSBY_ROUTE_UPDATED) {
      setTimeout(() => {
        window.__GATSBY_ROUTE_UPDATED = true;
      }, 25);
    }
  }, [pathname, hash]);

  return {
    language,
    setLanguage,
  };
}

function useOnLocationChange(callback: React.EffectCallback, extraDeps: React.DependencyList = []) {
  const { href, pathname, search } = useLocation()
  React.useEffect(callback, [href, pathname, search, ...extraDeps])
}

const ArticlesFilter = ({ sources }) => {
  const location = useLocation();

  return (
    <nav>
      
        All
        
      
      {sources.map(source =&gt; {
        const sourceUrl = `${URL.NEWS}/${source.slug}`;

        return (
          </nav>

const NavigationLink = ({ href, children }) => {
  const location = useLocation();
  const active = location.pathname.startsWith(href);

  return (
    
      {children}
    
  );
};

const MobileSubNavigation = ({ items, onNavigate }) => {
  const location = useLocation();

  return (
    
      {items.map(item => (
        
          {item.title}
        
      ))}
    
  );
};

const TicketsService = () => {
  const {
    pageContext: { capabilities },
    scrollToTicketsReference,
  } = useRoadmapService();
  const location = useLocation();
  const [{ filters, initial }, setState] = useState(initialState);

  interface ReleaseWithNumber {
    release: Release;
    orderNumber: number;
  }

  const prepareReleases = (): ReleaseWithNumber[] =>
    new TicketsProcessor(tickets as Tickets)
      .sortReleases()
      .filterCapabilitiesByQueryParams(filters, capabilities)
      .filterCapabilitiesWithoutCapabilities()
      .removeCapabilitiesWithoutTickets()
      .createReleasesWithNumber()
      .returnReleasesWithNumber();

const SubNavigationItem = ({ children, href }) => {
  const location = useLocation();
  const highlighted = location.pathname.startsWith(href);

  return (
    
      {children}
    
  );
};

const MobileNavigationLink = ({ children, href, onClick }) => {
  const location = useLocation();
  const highlighted = location.pathname.startsWith(href);

  return (
    
      {children}
    
  );
};