so I’m almost finish with my update form but I’ve got a problem in my conditional field. So I have a select field wherein it will show a conditional field depending on the selected value, but the problem I’m encountering right now, is I need to refresh or click another tab before showing.

In this code, I call the data in my database, and watch() it.

 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),
  });


  let watchEvent = form.watch('meetingTypeOption')

This is the form.

<FormField
  control={form.control}
  name="meetingTypeOption"
  defaultValue={
    dataEvent?.meetingTypeOption as
      | "meeting"
      | "webinar"
      | "hybrid"
      | "documentation"
      | "training"
      | undefined
  }
  render={({ field }) => (
    <FormItem className="w-full">
      <FormLabel>Type of Service</FormLabel>
      <Select
        onValueChange={(value) => meetingTypeOnchange(value)}
        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>
  )}
/>;

And these are my conditional fields, I didn’t put all the code since It’s just a checkbox and it doesn’t do anything to the question.

{dataEvent?.meetingOption === 'webinar' && (
<div>

</div>
)}

{dataEvent?.meetingOption === 'meeting' && (
<div>

</div>
)}

Now this is what happens. As you can see in the video, after redirecting to the page, there is no checkbox, but after clicking other tabs, it re-appears, and when I’m trying to console.log() my watch, I get undefined first and then I get the value after clicking another tab.