I have two input fields. when I press the check box the state value stored in solutestate should be in the first input box. then if I uncheck the box the value in the second input field should be changed. Both the input box should have an independent state change. I am attaching a codesandbox link which I am trying to edit Sandbox link.

import "./styles.css";
import { Jsme } from "jsme-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { default as FormData } from "form-data";

export default function App() {
  const [input1, setInput1] = useState("");
  const [input2, setInput2] = useState("");
  const [syncToFirst, setSyncToFirst] = useState();
  const [solutestate, setSoluteState] = useState();

  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      solute: "",
      solvent: ""
    }
  });

  const formData = new FormData();
  return (
    <div className="App">
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setSoluteState}
      />

      <h1>{solutestate}</h1>
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        onChange={(event) => {
          setSyncToFirst(event.target.checked ? 1 : 2);
        }}
      />

      <input
        className="mr-2 leading-tight"
        type="checkbox"
        onChange={(event) => {
          setSyncToFirst(event.target.checked ? 1 : 2);
        }}
      />
      <form>
        <input
          {...register("solute")}
          placeholder="SOLUTE"
          onChange={(e) =>
            syncToFirst === 1
              ? setSoluteState(e.target.value)
              : setInput1(e.target.value)
          }
          value={syncToFirst === 1 ? solutestate : input1}
        />
        <input
          {...register("solvent")}
          placeholder="SOLVENT"
          onChange={(e) =>
            syncToFirst === 2
              ? setSoluteState(e.target.value)
              : input2(e.target.value)
          }
          value={syncToFirst === 2 ? solutestate : input2}
        />
      </form>
    </div>
  );
}