Address Book Example - File-based Routing: Can not edit contact's detail

[vatisteve]

I was following the Address Book example with file-based routing configuration. Everything worked fine except for the "Edit Contact" feature. When I click this button, the edit page does not appear, but the URL changes (the /edit path is added).

This is the routes.ts:

import type {RouteConfig} from "@react-router/dev/routes";
import {flatRoutes} from "@react-router/fs-routes";

export default flatRoutes() satisfies RouteConfig;

The "Edit" form on the contact's detail page:

// ...
<Form action="edit">
    <button type="submit">Edit</button>
</Form>
// ...

And this is the app folder structure I followed, based on the File Router Convention:

app/
├── app.css
├── data.ts
├── root.tsx
├── routes.ts
└── routes/
    ├── _sidebar._index.tsx
    ├── _sidebar.contacts.$id.destroy.tsx
    ├── _sidebar.contacts.$id.edit.tsx
    ├── _sidebar.contacts.$id.tsx
    ├── _sidebar.tsx
    └── about.tsx

Please help me find the problem or any missing configuration.
I will appreciate your help, thank you!

Source code
You can experience this demo