I have a following route folder structure in my remix project

- routes/
 - example/
  - index.tsx
  - add.tsx
  - edit.$id.tsx
  - delete.$id.tsx

I am able to see index.tsx in the browser. But when I try to navigate to add, edit or delete, I get 404 not found. I am able to see the index.tsx locally in my dev environment on http://localhost:3000/example.

However when a path is being added further, like, http://localhost:3000/example/add or http://localhost:3000/example/edit/2, remix is unable to find that route and throws 404 not found on the browser. Using the following remix dependencies,

"@remix-run/css-bundle": "^2.5.1",
"@remix-run/node": "^2.5.1",
"@remix-run/react": "^2.5.1",
"@remix-run/serve": "^2.5.1",

Just creating a folder inside routes is considered a route in itself as per the documentation, which is the only thing I have used to far, however is there something else I need to do to make nested/folder routes work? Thanks