Folder routes cannot be found in remix

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

I figured it out. In case anyone needs to do the same.

Excerpt from Docs -

Routes can also be folders with a route.tsx file inside defining the route module.

Key point:

Note that when you turn a route module into a folder, the route module becomes folder/route.tsx, all other modules in the folder will not become routes.

Below examples with or without folders,

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

is exactly the same as,

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

Notice the change of example.tsx file name to route.tsx while containing the same code.

Therefore, either a different strategy can be used here to create routes or each route should be in its own designated folders.