I have two input text fields where I want to update them automatically using state. But whenever I uncheck the box, the value is disappearing. Once entered it should be there if I uncheck as well. If not, I cannot write two different values in the input text field.

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() {
  // I added the following state variables to keep track of checkboxes
  const [isCheckbox1Checked, setIsCheckbox1Checked] = useState(false);
  const [isCheckbox2Checked, setIsCheckbox2Checked] = useState(false);
  const [input1, setInput1] = useState("");
  const [input2, setInput2] = useState("");
  const [syncToFirst, setSyncToFirst] = useState();
  const [solutestate, setSoluteState] = useState();
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      solute: "",
      solvent: ""
    }
  });
  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"
        value={isCheckbox1Checked}
        onChange={() => setIsCheckbox1Checked(prev => !prev)}
      />
      <input
        className="mr-2 leading-tight"
        type="checkbox"
        value={isCheckbox2Checked}
        onChange={() => setIsCheckbox2Checked(prev => !prev)}
      />
      <form>
        <input
          {...register("solute")}
          placeholder="SOLUTE"
          onChange={(e) =>
            syncToFirst === 1
              ? setSoluteState(e.target.value)
              : setInput1(e.target.value)
          }
          value={isCheckbox1Checked ? solutestate : input1}
        />
        <input
          {...register("solvent")}
          placeholder="SOLVENT"
          onChange={(e) =>
            syncToFirst === 2
              ? setSoluteState(e.target.value)
              : input2(e.target.value)
          }
          value={isCheckbox2Checked ? solutestate : input2}
        />
      </form>
    </div>
  );
}

need a handler to save the state when the text changes. so that if I uncheck the check box the previous state is present in the input field text. and whenever i try to type directly in the second input text field it is throwing an error as input2 is not a function. code sand box link