I’m having this issue and cannot seem to recognise what the problem is.
I have a list of users coming from a db and listed as a directory on the page. When i click on one of the directory (user); the url where it suppose to go changes (on the address bar) but the page doesn’t change to the new page where it supposed to go (load).
I have to then refresh the page which then loads the new page.
Thinking it might be router issue. This is part of my code – if anyone can suss out what the issue is or direct me correctly with the code will appreachiate it:

    const handleDisable = useCallback(
    async (id: DatabaseID) => {
      await disableUser(id);
      queryClient.invalidateQueries(["directories", filters]);
    },
    [queryClient, filters]
  );

  const handleEnable = useCallback(
    async (id: DatabaseID) => {
      await enableUser(id);
      queryClient.invalidateQueries(["directories", filters]);
    },
    [queryClient, filters]
  );

const columns = useMemo(
    () => [
      {
        id: "firstName",
        Header: "Name",
        Cell: (cell: CellValue) => {
          const user: User = cell.row.original;
          return (
            <>
              {user.firstName} {user.lastName}
              <br />
              {user?.email}
            </>
          );
        },
        accessor: (user: User) => user.firstName,
      },
      {
        id: "organization",
        Header: "Organization",
        Cell: (cell: CellValue) => {
          const user: User = cell.row.original;
          return (
            <div className="text-base">{user?.organization?.businessName ?? "No Organization"}</div>
          );
        },
        accessor: (user: User) => user?.organization?.businessName,
      },
      {
        id: "status",
        Header: "Status",
        Cell: (cell: CellValue) => {
          const user: User = cell.row.original;
          return <div className="text-base capitalize text-secondary">{user?.status}</div>;
        },
        accessor: (user: User) => user.status,
      },
      {
        id: "createdAt",
        Header: "Application date",
        Cell: (cell: CellValue) => {
          const user: User = cell.row.original;
          return (
            <div className="text-base">
              {user.createdAt && moment(user.createdAt).format("D MMMM, yyyy h:mm A")}
            </div>
          );
        },
        accessor: (user: User) => user.createdAt,
      },
      {
        id: "lastLoginAt",
        Header: "Last Login",
        Cell: (cell: CellValue) => {
          const user: User = cell.row.original;
          return (
            <div className="text-base text-secondary">
              {user.lastLoginAt && moment(user.lastLoginAt).format("D MMMM, yyyy h:mm A")}
            </div>
          );
        },
        accessor: (user: User) => user.lastLoginAt,
      },
      {
        id: "actions",
        Header: "Actions",
        Cell: (cell: CellValue) => {
          const user: User = cell.row.original;
          const options = [];

          if (user.status === UserStatus.accepted) {
            options.push({
              label: "Disable / Reject",
              onClick: () => handleDisable(user._id as string),
            });
          }

          if (user.status === UserStatus.rejected) {
            options.push({
              label: "Enable / Accept",
              onClick: () => handleEnable(user._id as string),
            });
          }

          options.push({
            label: (
              <a
                href={`mailto:${user.email}&subject="About your application on Launched"`}
                target="_blank"
                rel="noreferrer"
              >
                Email contact
              </a>
            ),
          });

          return <ItemOptions options={options} />;
        },
      },
    ],
    [handleDisable, handleEnable]
  );