I'm trying to create a forward and a backward button that will navigate within the application and I need the buttons to be grey when the user can not go back or forth anymore and black when it can be used. The issue is I don't know how to track that, specially the forward. I'm using useRouter (typescript and tailwind) in Next.js. I have tried using window.history.length > 2for going forward and window.history.state but neither of those work. Perhaps because I might have gone between multiple pages so the length is more than two, but since I have not gone backwards, I can't go forward either. So the button keeps are black but not functioning (atleast the forward button). And if the colors work then the forward button does not work at all. Here is part of the code for more context

const NavigationButtons = () => {
  const router = useRouter();
  const [canGoBack, setCanGoBack] = useState(false);
  const [canGoForward, setCanGoForward] = useState(false);

  useEffect(() => {
    const updateHistoryState = () => {
      setCanGoBack(window.history.length > 1);

      setCanGoForward(
        window.history.state && window.history.state.idx < window.history.length - 1
      );
    };`