Form's default action behaviour.

[Ashilex]

Hi, looking at docs I can't understand how do you set a form's action to a precise route.
Let me show an example:

index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children:[
      {
        path:'xxx/*',
        element: <AAA />,
        action: ()=> {
          console.log('App xxx')
          return 0
        }
      }
    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
)

and

AAA.js

export const AAA = (props) => {
  const element = useRoutes([
    {
      path:'submit',
      element: <div>AAA</div>,
      action: ()=>{
        console.log('App xxx AAA')
        return 0
      }
    }
  ])


  return <div>
    {element}
    <Form
      method="post"
      action="submit"
    >
      <input name="name" type="text"/>
    <button type="submit">Send</button>
    </Form>

  </div>
}

When I submit the form route 'xxx/submit' correctly renders <div>AAA</div> inside the page at the same time I expected its action to be triggered and to see console logged ''App xxx AAA" instead action from parent route ('xxx/*') its triggered and "App xxx" its printed.

I can't understand this.

Hope the example is clear.

thanks