Hi, this is my folder structure

- customer
-- [customerId]
--- layout.tsx
--- products
---- page.tsx
---- layout.tsx
---- @product
----- default.tsx
----- [productId]
------page.tsx

So basically /products has a layout that has a list of products (/products/page.tsx) and then I'd like to render the rest of the page as the active product.

Currently, this is what happens

If I refresh the page on /customer/customerId/products, everything works as expected. The products/layout.tsx gets shown properly, and the @product/default gets shown.. It says something like "Please select a product"

Then, if I click on a product, and am routed to /customer/customerId/products/productId, the page updates properly and the @product/[productId]/page.tsx is shown.

However, when I refresh that page, it throws a 404 for the entire page. Everything on the page falls apart, including all the layouts up the chain (except the layout outside of customer..)

I have no idea what's going on and I've tried to read the docs multiple times to understand how to do something like this.