Next.js link not routing from the same page with different parameters

When trying to go from route /category/X to /category/Y it changes the address on the url bar but the page does not rerender with the new data. When refreshing the page it loads fine. When routing from a different page it works fine.

export async function getStaticPaths() {
    const { data: categories } = await axios.get(`API ENDPOINT`);
    const paths = categories.map(category => ({
      params: { id: category },
    }));

    return { paths, fallback: true }
}

export async function getStaticProps(context) {
    const id = context.params.id;
    let preloadedProducts = await axios.get(`API ENDPOINT`);
    
    return {
        props: {
            preloadedProducts
        },
        revalidate: 10
    }
}

And the way I link to this pages is:

<Link href={`/category/${categoryId}/`} passHref={true}>
    {link.title}</a>
</Link>