issue: Duplicated checkboxes create the same values in array about react-hook-form HOT 5 CLOSED

import * as React from "react";
import { useForm } from "react-hook-form";
import Headers from "./Header";
import "./styles.css";

let renderCount = 0;

export default function App() {
  const { register, handleSubmit, setValue, watch } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      checkbox: [],
      radio: "",
      message: "",
    },
  });

  const checkboxValue = watch("checkbox", [])

  const handleCheckboxChange = React.useCallback((e) => {
    const { checked, value } = e.target;
    const newValue = checked ? [...checkboxValue, value] : checkboxValue.filter((v) => v !== value) 
    setValue("checkbox", newValue);
  }, [setValue, checkboxValue]);

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Headers renderCount={renderCount} />
      <input
        {...register("checkbox")}
        type="checkbox"
        value="A"
        onChange={handleCheckboxChange}
      />
      <input
        {...register("checkbox")}
        type="checkbox"
        value="B"
        onChange={handleCheckboxChange}
      />
      <input
        {...register("checkbox")}
        type="checkbox"
        value="C"
        onChange={handleCheckboxChange}
      />

      <div style={{ border: "1px solid red", padding: 12 }}>
        <h2>THIS IS A MODAL</h2>
        <p>Duplicated checkboxes with the same values!</p>
        <input
          {...register("checkbox")}
          type="checkbox"
          value="A"
          onChange={handleCheckboxChange}
        />
        <input
          {...register("checkbox")}
          type="checkbox"
          value="B"
          onChange={handleCheckboxChange}
        />
        <input
          {...register("checkbox")}
          type="checkbox"
          value="C"
          onChange={handleCheckboxChange}
        />
      </div>
      <input type="submit" />
    </form>
  );
}

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';

const useFormSync = (forms) => {
  useEffect(() => {
    const syncForms = (updatedForm, updatedValues) => {
      forms.forEach((form) => {
        if (form !== updatedForm) {
          Object.keys(updatedValues).forEach((name) => {
            form.setValue(name, updatedValues[name]);
          });
        }
      });
    };

    const unsubscribe = forms.map((form) =>
      form.watch((values) => syncForms(form, values))
    );

    return () => {
      unsubscribe.forEach((unsub) => unsub());
    };
  }, [forms]);
};

// Usage
function YourComponent() {
  const form1 = useForm();
  const form2 = useForm();

  useFormSync([form1, form2]);

  return (
    <>
      {/* Form 1 */}
      <form>
        <input name="field1" ref={form1.register} />
        <input name="field2" ref={form1.register} />
      </form>

      {/* Form 2 */}
      <form>
        <input name="field1" ref={form2.register} />
        <input name="field2" ref={form2.register} />
      </form>
    </>
  );
}

export default YourComponent;