so I’m trying to create an update function in my select field wherein it’s defaultValue will be coming from database and make it controllable? I’m using react-hook-form and zod for form validation. So this is what I did.

After successfully getting the data from database

  const { data: dataEvent, isLoading: isLoadingEvent } = useQuery({
    queryKey: ["edit", id],
    queryFn: async () => {
      const res = await getDataById(id);
      return res;
    },
  });

 const form = useForm<Events>({
    resolver: zodResolver(formSchemaData),
  });

I make it as a defaultValue in my Select option.

<FormField
  control={form.control}
  name="meetingTypeOption"
  defaultValue={dataEvent?.meetingTypeOption}
  render={({ field }) => (
    <FormItem className="w-full">
      <FormLabel>Type of Service</FormLabel>
      <Select onValueChange={field.onChange} defaultValue={field.value}>
        <FormControl>
          <SelectTrigger>
            <SelectValue placeholder="Select a meeting type" />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          <SelectItem value="meeting">Zoom Meeting</SelectItem>
          <SelectItem value="webinar">Zoom Webinar</SelectItem>
          <SelectItem value="hybrid">Hybrid</SelectItem>
          <SelectItem value="documentation">Documentation</SelectItem>
          <SelectItem value="training">Training</SelectItem>
        </SelectContent>
      </Select>

      <FormMessage />
    </FormItem>
  )}
/>;

But the problem I’m encountering is when I tried to select other option, the value didn’t change.

For example.

This is the defaultValue

But when I change the value, I still get it as a hybrid.