I have here an edit page wherein it will fetch data from database, and check the meeting_type_option to render specific field. Now what happen is when I fetch the data at first, it fills the checkbox

And then once I select other option, I empty it using useEffect

But the problem, is when I switch it back to it’s original state, the checkbox is uncheck, bu the data is still showing

On my approach this is what I did.

I fetched the data using useQuery

  const appoinment = useQuery({
    queryKey: ['appointment', 'data', 'history', id],
    queryFn: () => fetch(`/api/single-sched/${id}`).then((res) => res.json())
  })

  const { data, isLoading, error } = appoinment;

  const form = useForm<CreateAppointmentSchemaType>({
    resolver: zodResolver(CreateAppointmentSchema),
  });

And then after that, I use form.watch()

let watchEvent = form.watch("meeting_type_option");

And then I use it for showing the fields.

   <FormField
                  control={form.control}
                  name="meeting_type_option"
                  defaultValue={data?.meeting_type_option}
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel>Type of Service</FormLabel>
                      <Select
                        onValueChange={(value) =>
                          handleMeetingTypeChange(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>
                  )}
                />

             {watchEvent === "meeting" && (
                  <>
                    //Same form field from webinar                   
                  </>
                )}

                {watchEvent === "webinar" && (
                  <>
                    <FormField
                      control={form.control}
                      name="meeting_type_service"
                      render={() => (
                        <FormItem>
                          {zoomWebinarChoice.map((item) => (
                            <FormField
                              key={item.id}
                              control={form.control}
                              name="meeting_type_service"
                              render={({ field }) => {
                                return (
                                  <FormItem
                                    key={item.id}
                                    className="flex flex-row items-start space-x-3 space-y-0"
                                  >
                                    <FormControl>
                                      <Checkbox
                                        checked={field.value?.includes(item.id)}
                                        onCheckedChange={(checked) => {
                                          return checked
                                            ? field.onChange([
                                              ...field.value,
                                              item.id,
                                            ])
                                            : field.onChange(
                                              field.value?.filter(
                                                (value) => value !== item.id
                                              )
                                            );
                                        }}
                                      />
                                    </FormControl>
                                    <FormLabel className="font-normal">
                                      {item.label}
                                    </FormLabel>
                                  </FormItem>
                                );
                              }}
                            />
                          ))}
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    
                  

                  </>
                )}

data.js

I use this to compare the checkbox

export const zoomMeetingChoice = [
  {
    id: 'meeting_attendees',
    label: 'Attendees can open their camera',
  },
  {
    id: 'meeting_waiting',
    label: 'Waiting Room',
  },
  {
    id: 'meeting_breakout',
    label: "Breakout Room"
  },
  {
    id: 'meeting_poll',
    label: 'Poll'
  },
  {
    id: 'meeting_recording',
    label: 'Recording'
  },
  {
    id: 'meeting_livestream',
    label: 'Livestreaming'
  },
  {
    id: 'meeting_hybrid',
    label: "Hybrid"
  }
]