So I’ve wrapped a component with <Link> tag. So when I click it, the url is changing to /product/1 as expected.

My router code ..

{
        path: "/",
        element: <App />,
        children: [
            {
                path: "/product/:productId",
                element: <ListingDetailsPage />
            }
      

On ListingDetailsPage component, I’m able to see that API call is happening and receiving proper response, but I don’t see any change in my screen.

ListingDetailsPage.tsx

export default function () {

    const { productId } = useParams();
    const [product, setProduct] = useState<Product | null>(null);

    useState(() => {
      console.log({productId});
      async function fetchProduct() {
        const prod = await getProductsOrProductDetails(`${import.meta.env.VITE_PRODUCT_URL}/${productId}`);
        console.log("Product Details ", prod);
        if (prod) {
          setProduct(prod);
        }
      }
      fetchProduct();
    }, [productId]);

    return <>
        <div>
            {product ? <ListingCardDetails product={product} /> : <h1>No Product</h1>}
        </div>
    </>
}

Not sure why nothing is changing on screen. Can someone please help??