Form action not sending formData

export const LandingPage = () => {
  return (
    <div
      className='flex flex-col items-center justify-center w-full h-screen m-auto
    '
    >
      <Form method='get' className='flex flex-col items-center'>
        <input
          name='username'
          type='text'
          placeholder='Username'
        />
        <input
          name='password'
          type='password'
          placeholder='Password'
        />
        <button
          type='submit'
        >
          Log In
        </button>
      </Form>
    </div>
  );
};

export const LandingPage = () => {
  return (
    <div
      className='flex flex-col items-center justify-center w-full h-screen m-auto
    '
    >
      <Form method='get' className='flex flex-col items-center'>
        <input
          name='username'
          type='text'
          placeholder='Username'
        />
        <input
          name='password'
          type='password'
          placeholder='Password'
        />
        <button
          type='submit'
        >
          Log In
        </button>
      </Form>
    </div>
  );
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route
        element={<LandingPage />}
        path='/'
        action={async ({ request, params }) => {
          const formData = await request.formData();
          console.log(formData );
          return formData;
        }}
      />
  </Route>
</>
))

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route
        element={<LandingPage />}
        path='/'
        action={async ({ request, params }) => {
          const formData = await request.formData();
          console.log(formData );
          return formData;
        }}
      />
  </Route>
</>
))