reset api is not updating checkbox ReactJS

Question

So I have a MCQ form where you will able to add and edit the question. So Adding part is working fine, but when I try to edit the question. All the field is auto filling except checkboxes. I'm using react-hook-form library in that I'm using the reset API so I want my reset API to update all those checkboxes

import { useDispatch } from "react-redux";
import { useState, useEffect } from "react";
import { Button, Checkbox, TextField, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { showMessage } from "app/store/fuse/messageSlice";
import QuestionApis from "app/services/exercises/questions";

function NewQuestion(props) {
  const dispatch = useDispatch();
  const { data, onCancel } = props;

  const {
    register,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm();

  useEffect(() => {
    if (data) {
      const editPayload = {};
      data.options.map((ele, index) => {
        editPayload[`opt${index + 1}`] = ele.label;
        editPayload[`opt${index + 1}Checked`] = ele.isAnswer;
        return ele;
      });
      editPayload.question = data.markdown;
      reset(editPayload);
    }
  }, [data]);

  const onSubmit = async (payload) => {
    let response = null;
    let message = "";
    let questionPayload = null;
    if (data) {
      questionPayload = formatQuestionPayload(payload);
      response = await QuestionApis.updateQuestion(data._id, questionPayload);
      message = "Question updated successfully.";
    } else {
      questionPayload = formatQuestionPayload(payload);
      response = await QuestionApis.createQuestion(questionPayload);
      message = "Question created successfully.";
      onCancel();
    }
    if (response.data) {
      dispatch(showMessage({ message }));
      props.onSuccess(response.data);
      onCancel();
    } else {
      dispatch(showMessage({ message: "Error occurred while saving domain." }));
    }
    onCancel();
  };

  const formatQuestionPayload = (payload) => {
    const options = [];
    if (payload.opt1) {
      options.push({ label: payload.opt1, isAnswer: payload.opt1Checked });
    }
    if (payload.opt2) {
      options.push({ label: payload.opt2, isAnswer: payload.opt2Checked });
    }
    if (payload.opt3) {
      options.push({ label: payload.opt3, isAnswer: payload.opt3Checked });
    }
    if (payload.opt4) {
      options.push({ label: payload.opt4, isAnswer: payload.opt4Checked });
    }
    payload.options = options;
    return payload;
  };

  return (
    <div style={{ width: 600, maxWidth: 600, height: "auto", padding: "1px" }}>
      <form
        noValidate
        onSubmit={handleSubmit(onSubmit)}
        className="flex flex-col md:overflow-hidden space-y-12"
      >
        <TextField
          {...register("question", { required: true })}
          label="Question"
          id="question"
          error={!!errors.question}
          helperText={errors?.question?.message}
          variant="outlined"
          required
          fullWidth
        />
        <Typography variant="caption">
          Kindly fill in the questions above and choose the correct answers by
          checking them.
        </Typography>
        <div className="flex flex-col space-y-8">
          <div className="flex flex-row">
            <Checkbox
              {...register("opt1Checked")}
            />
            <TextField
              {...register("opt1", { required: true })}
              label="Option 1"
              id="opt1"
              error={!!errors.description}
              helperText={errors?.title?.description}
              variant="outlined"
              required
              fullWidth
            />
          </div>
          <div className="flex flex-row">
            <Checkbox {...register("opt2Checked")} />
            <TextField
              {...register("opt2", { required: true })}
              label="Option 2"
              id="opt2"
              error={!!errors.description}
              helperText={errors?.title?.description}
              variant="outlined"
              required
              fullWidth
            />
          </div>
          <div className="flex flex-row">
            <Checkbox {...register("opt3Checked")} />
            <TextField
              {...register("opt3")}
              label="Option 3"
              id="opt3"
              error={!!errors.description}
              helperText={errors?.title?.description}
              variant="outlined"
              fullWidth
            />
          </div>
          <div className="flex flex-row">
            <Checkbox {...register("opt4Checked")} />
            <TextField
              {...register("opt4")}
              label="Option 4"
              id="opt4"
              error={!!errors.description}
              helperText={errors?.title?.description}
              variant="outlined"
              fullWidth
            />
          </div>
        </div>

        <div className=" flex flex-row justify-end space-x-12">
          <Button type="submit" color="primary" variant="outlined" autoFocus>
            Save
          </Button>
          <Button onClick={onCancel} color="secondary" variant="outlined">
            Cancel
          </Button>
        </div>
      </form>
    </div>
  );
}

export default NewQuestion;

Expected output

Getting output