I guess I'm struggling with the concept of how do to this correctly. I want to fetch the username from session data and render it to a form input so it can be edited by the user. I'm not quite sure how to achieve this

"use client";

import { auth } from "@/auth";
import { useState, useEffect } from "react";

const ProfileForm = async () => {
  const session = await auth();

  const [username, setUsername] = useState(session?.user.username);

  // define all default values for the various profile inputs
  const form = useForm<z.infer<typeof profileSchema>>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      username: username,
    },
  });

  // define submit handlers for each input - assign key={1}, etc. to each.
  const handleUsernameSubmit = async (
    values: z.infer<typeof profileSchema>,
    e,
  ) => {
    e.preventDefault();
    console.log("values", values);
  };

  return (
    <form
      onSubmit={form.handleSubmit(handleUsernameSubmit)}
      className="space-y-8"
    >
      <FormField
        control={form.control}
        name="username"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input placeholder="Email Address" type="username" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </form>
  );
};

export default ProfileForm;