what is the proper way of getting data from database to display it in form, and then once form is submitted save those values in database again, im using react-hook-form with shadcnui and a prisma orm for database
the problem is, the id i need for sql query is on client side stored in context (the guildId from link)
i have a app/dashboard/[guildId]/page.tsx that renders a <WelcomeForm />

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "./ui/textarea"
import ChannelSelect from "./form/ChannelSelect"
import { addData } from "@/lib/actions"
import { useCurrentGuild } from "@/app/contexts/CurrentGuildContext"

const FormSchema = z.object({
  welcomeChannel: z.string(),
  welcomeMessage: z.string().min(2),
})

export default function WelcomeForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })
  const { guild } = useCurrentGuild()

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    await addData(guild.id, data)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="welcomeChannel"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Welcome channel</FormLabel>
              <ChannelSelect {...field} />
              <FormDescription>
                Select a channel where to send welcome message
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="welcomeMessage"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Welcome message</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Message"
                  className="resize-none"
                  {...field}
                />
              </FormControl>
              <FormDescription>
                The message that will be sent to the welcome channel
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
      <Button type="submit">Save</Button>
    </Form>
  )
}

this is this component, it has to be client side cause it uses context, that stores the current guild the dashboard is at (the guildId param in the link)

for welcomeChannel it uses <ChannelSelect /> which looks like this

"use client"

import { useCurrentGuild } from "@/app/contexts/CurrentGuildContext"
import { FormControl } from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default async function ChannelSelect({
  onChange,
}: {
  onChange: (value: string) => void
}) {
  const { channels } = useCurrentGuild()
  const textChannels = channels.filter((channel) => channel.type === 0)
  return (
    <Select onValueChange={onChange} defaultValue={undefined}>
      <FormControl>
        <SelectTrigger>
          <SelectValue placeholder="Select a channel" />
        </SelectTrigger>
      </FormControl>
      <SelectContent>
        {textChannels.map(({ id, name }) => (
          <SelectItem key={id} value={id}>
            #{name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

now i want to display the channel that was selected before if so in that select so using defaultValue prop, the problem comes how to get that from db