next js routing issue

import { useCallback, useMemo, useState, useEffect } from 'react';
import Head from 'next/head';
import ArrowDownOnSquareIcon from '@heroicons/react/24/solid/ArrowDownOnSquareIcon';
import ArrowUpOnSquareIcon from '@heroicons/react/24/solid/ArrowUpOnSquareIcon';
import PlusIcon from '@heroicons/react/24/solid/PlusIcon';
import { Box, Button, Container, Stack, SvgIcon, Typography } from '@mui/material';
import { useSelection } from 'src/hooks/use-selection';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { applyPagination } from 'src/utils/apply-pagination';
import { Modal, Backdrop, Fade, TextField } from '@mui/material';
import AddProductModal from 'src/components/AddProductModal';
import AddItemsModal from 'src/components/AddItemModal';
import { useDispatch, useSelector } from 'react-redux';
import { getAllProducts } from 'src/redux/productSlice';
import AddCategoryModal from 'src/components/AddCategoryModal';
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { getAllCategories } from 'src/redux/categorySlice';
import { formatDistanceToNow } from 'date-fns';
import { parseISO } from 'date-fns';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';



const useCategories = () => {
  const categoriesState = useSelector((state) => state.category.categories);
  const { user } = useSelector((state) => state.auth);

  return useMemo(() => {
    if (user.isVendor) {
      const filteredCategories = categoriesState.filter((category) =>
        category.item._id === user.vendorDetails.item
      );
      return filteredCategories;
    }

    return categoriesState;
  }, [categoriesState, user, user]);
};


const useCategoryIds = (categories) => {
  return useMemo(() => {
    if (categories) {
      return categories.map((category) => category._id);
    }
    return [];
  }, [categories]);
};

const renderDetailPanel = ({ row }) => {
  const products = row.original.products;
  if (!products || products.length === 0) {
    return null;
  }

  return (
    <TableContainer component={Paper}>
      <Table size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Product Name</TableCell>
            <TableCell align="right">Location</TableCell>
            <TableCell align="right">Price</TableCell>
            <TableCell align="right">Dimension</TableCell>
            <TableCell align="right">Unit</TableCell>
            <TableCell align="right">Created At</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {products.map((product) => (
            <TableRow key={product._id}>
              <TableCell component="th" scope="row">
                {product.name}
              </TableCell>
              <TableCell align="right">{product.location}</TableCell>
              <TableCell align="right">{product.price}</TableCell>
              <TableCell align="right">{product.dimension}</TableCell>
              <TableCell align="right">{product.unit}</TableCell>
              <TableCell align="right">
                {formatDistanceToNow(parseISO(product.createdAt), { addSuffix: true })}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};


const ProductsPage = () => {
  const dispatch = useDispatch();
  const { user } = useSelector((state) => state.auth);
  const { categoryStatus } = useSelection((state) => state.category)

  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const categories = useCategories(page, rowsPerPage);
  const categoryIds = useCategoryIds(categories);
  const categoriesSelection = useSelection(categoryIds);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isAddProductModalOpen, setIsAddProductModalOpen] = useState(false);
  const [isAddItemsModalOpen, setIsAddItemsModalOpen] = useState(false);
  const [isAddCategoryModalOpen, setIsAddCategoryModalOpen] = useState(false);

  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch, isModalOpen]);

  const handlePageChange = useCallback(
    (event, value) => {
      setPage(value);
    },
    []
  );

  const handleRowsPerPageChange = useCallback(
    (event) => {
      setRowsPerPage(event.target.value);
    },
    []
  );

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const handleOpenAddProductModal = () => {
    setIsAddProductModalOpen(true);
  };

  const handleCloseAddProductModal = () => {
    setIsAddProductModalOpen(false);
  };

  const handleOpenAddItemsModal = () => {
    setIsAddItemsModalOpen(true);
  };

  const handleCloseAddItemsModal = () => {
    setIsAddItemsModalOpen(false);
  };

  const handleOpenAddCategoryModal = () => {
    setIsAddCategoryModalOpen(true);
  };

  const handleCloseAddCategoryModal = () => {
    setIsAddCategoryModalOpen(false);
  };

  const columns = useMemo(
    () => [
      {
        accessorKey: 'item.img',
        header: 'Image',
        Cell: ({ row }) => (
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: '1rem',
            }}
          >
            <img
              alt="avatar"
              height={50}
              src={row.original.item.img}
              loading="lazy"
              style={{ borderRadius: '50%' }}
            />
            {/* using renderedCellValue instead of cell.getValue() preserves filter match highlighting */}
          </Box>
        ),

      },
      {
        accessorKey: 'item.name',
        header: 'Category Item',
        size: 200,
      },

      {
        accessorKey: 'name',
        header: 'Category Name',
        size: 200,
      },
      {
        accessorKey: 'unit',
        header: 'Unit',
        size: 150,
      },
      {
        accessorKey: 'createdAt',
        header: 'Created At',
        size: 150,
        Cell: ({ row }) => {
          const formattedDate = formatDistanceToNow(parseISO(row.original.createdAt), { addSuffix: true });
          return <span>{formattedDate}</span>;
        },
      },
    ],
    [],
  );

  const table = useMaterialReactTable({
    columns,
    data: categories,
    renderDetailPanel,
  });


  return (
    <>
      <Head>
        <title>Categories | Your App Name</title>
      </Head>
      <Box
        component="main"
        sx={{
          flexGrow: 1,
          py: 8,
        }}
      >
        <Container maxWidth="xl">
          <Stack spacing={3}>
            <Stack
              direction="row"
              justifyContent="space-between"
              spacing={4}
            >
              <Stack spacing={1} direction="row">
                <Typography variant="h4">Product/Categories</Typography>
                <Stack
                  alignItems="center"
                  direction="row"
                  spacing={1}
                >

                </Stack>
              </Stack>
              <Stack spacing={1} direction="row">
                <Button
                  startIcon={(
                    <SvgIcon fontSize="small">
                      <PlusIcon />
                    </SvgIcon>
                  )}
                  variant="contained"
                  onClick={handleOpenAddProductModal}
                >
                  Add Product
                </Button>
                <AddProductModal isOpen={isAddProductModalOpen} onClose={handleCloseAddProductModal} />

                {!user.isVendor && (<Button
                  startIcon={(
                    <SvgIcon fontSize="small">
                      <PlusIcon />
                    </SvgIcon>
                  )}
                  variant="contained"
                  onClick={handleOpenAddItemsModal}
                >
                  Add Items
                </Button>)}


                <AddItemsModal isOpen={isAddItemsModalOpen} onClose={handleCloseAddItemsModal} />

                {!user.isVendor && (<Button
                  startIcon={(
                    <SvgIcon fontSize="small">
                      <PlusIcon />
                    </SvgIcon>
                  )}
                  variant="contained"
                  onClick={handleOpenAddCategoryModal}
                >
                  Add Categories
                </Button>)}

                <AddCategoryModal isOpen={isAddCategoryModalOpen} onClose={handleCloseAddCategoryModal} />
              </Stack>
            </Stack>
            {categories && Array.isArray(categories) && categories.length > 0 && <MaterialReactTable table={table} />}
          </Stack>
        </Container>
      </Box>
    </>
  );
};

ProductsPage.getLayout = (page) => (
  <DashboardLayout>
    {page}
  </DashboardLayout>
);

export default ProductsPage;

this is above my products page in next js ,and there are other pages too like orders,

the issue is all pages routing are working fine but when i go to product page and then i click to another page from sidenav link after coming to product page,the page doesnt change no error in console rest all pages are working productis also working fine only page are not getting routed after going to product page