Не срабатывает useEffect при переходе через next.js

Мне нужно чтобы пользователь мог фильтровать полученные данные. Поиск + фильтр по производителям. Продукция поделена на категории(Арматура, Труба, и т.д). При переходе на другую категорию по <Link href=products/armatura/${item.category} /> не обновляются данные. Они обновляются только после перезагрузки страницы.

export default function Product(props) {

  const [dataLoaded, setDataLoaded] = useState(false)
  const [currentPage, setCurrentPage] = useState(1);
  const [productsPerPage, setProductsPerPage] = useState(20);
  const [dataProducts, setDataProducts] = useState(props.data)
  const [searchValue, setSearchValue] = useState('')

  useEffect(() => {
    if (props.data) setDataLoaded(true)
    setDataProducts(props.data)
  }, [])

  const filterByManufacturer = (selectedManufacturers) => {
    if (selectedManufacturers.length > 0) {
        const filteredProductsByMan = props.data.filter(p => selectedManufacturers.includes(p.manufacturer));
        setDataProducts(filteredProductsByMan);
    } else {
    setDataProducts(props.data)
    }
    setSearchValue('')
  }

  const onInputChange = (e) => {
    e.preventDefault();
    const filteredProducts = props.data.filter((product) =>
      product.name.toLowerCase().includes(e.target.value.toLowerCase()) ||
      product.manufacturer.toLowerCase().includes(e.target.value.toLowerCase())
    );
    setSearchValue(e.target.value)
    setDataProducts(filteredProducts)
  };

  const indexOfLastProduct = currentPage * productsPerPage;
  const indexOfFirstProduct = indexOfLastProduct - productsPerPage;
  const currentProducts = dataProducts.slice(indexOfFirstProduct, indexOfLastProduct);

  // Change Page
  const paginate = (pageNumber) => setCurrentPage(pageNumber);
  const changeProductsPerPage = (productsNumber) => setProductsPerPage(productsNumber);

  return(
    <Layout>
      <ContentHeader text={t('common:menu_products')} />
      <ContentMenu currentPage="suppliers" products={true} slug={props.slug} />
      <div className={`${utilStyles.content} ${styles.content}`}>
        <div className={utilStyles.container}>
          <SearchInput
            placeholder="Поиск..."
            onChange={onInputChange}
            value={searchValue}
          />
          { dataLoaded ?
            <ProductsTable products={currentProducts} manufacturers={props.manufacturers} filterByManufacturer={filterByManufacturer} />
          :
            <SkeletonTable />
          }
          <Pagination productsPerPage={productsPerPage} totalProducts={dataProducts.length} paginate={paginate} changeProductsPerPage={changeProductsPerPage} currentPage={currentPage} />
        </div>
      </div>
    </Layout>
  )
}

export async function getServerSideProps(context) {
  const req = context.req;
  const res = context.res;
  try {
    const id = context.params.id

    const result = await fetch('http://localhost:3000/api/products/' + id)
    const data = await result.json()

    data.sort((a,b) => {
      return a.size - b.size
    })

    var obj = {};
    var arr = [];
    for (var i=0; i < data.length; i++) {
      obj[data[i]['manufacturer']] = data[i];
    }
    arr = Object.keys(obj)
    let jsonObj = []
    arr.map((data, i) => {
      let newobj = {}
      newobj['text'] = data
      newobj['value']= data
      jsonObj.push(newobj)
    })

    return {
      props: {
        data: data, manufacturers: jsonObj, slug: id
      }
    }
  } catch {
    res.statusCode = 404
    return {
      props: {}
    }
  }
}