I am trying to make a form using nextjs server actions. It looks something like:

    <form action={handleSubmit}>
      <div className="w-screen h-screen flex justify-center items-center bg-cover">
        <div className="grid justify-center items-center p-16 rounded bg-[rgba(0,0,0,0.80)]">
          <Input label="Email" type="text" placeholder="Enter your email" />
          <Input label="Password" type="password" placeholder="Enter your password" />
          <Button type="submit">Login</Button>
        </div>
      </div>
    </form>
  );

and the action like

  async function handleSubmit(formData: FormData) {
    'use server';

    console.log(formData);
  }

defined within the same function as component.
The formData doesn't contain the data entered in inputs.
Also btw, the <Input /> component just a custom input nested inside a div if that matters.