I'm using next13 and it's server components

export default function Login() {
  const { toast } = useToast();

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      password: "",
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    const response = await fetch("/agsa", {
      method: "POST",
      headers: {},
      body: JSON.stringify({
        username: values.username,
        password: values.password,
      }),
    });
    if (!response.ok) {
      console.log("error has occured");
    }
    toast({
        description: "Login was successful"
    })
  }

  return <LoginForm form={form} onSubmit={onSubmit} />;
}

What's the way I could move my form declaration to the client component while retaining the username and password values in the server component for data fetching?