How to decompose React form logic?

Question

React

Hello everyone, I have a form that contains inputs, all state management is in this form, so the entire form will be re-rendered on input in any input. I would like to know how it is possible to rewrite (decompose the logic) the work of components so that it and only it is re-rendered on input in one input. There was an option to make changes. state inputs to the component <InputItem/>but then the parent form will not know what data is there. I know the Spanish version. Context.API but somehow I don't want to resort to it. Maybe there are other options? Thank you .

const RegistrationForm = () => {
  const [password, setPass] = useState("");
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [surName, setSurName] = useState("");
  const dispatch = useDispatch();
  const navigator = useNavigate();
  const columns = [
    {
      value: email,
      onChangeEvent: setEmail,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "[email protected]",
      label: "enter your e-mail",
    },
    {
      value: name,
      onChangeEvent: setName,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "your first name",
      label: "your first name",
    },
    {
      value: surName,
      onChangeEvent: setSurName,
      type: "text",
      className: "form-control",
      id: "floatingInput",
      placeholder: "your last name",
      label: "your last name",
    },
    {
      onChangeEvent: setPass,
      value: password,
      type: "password",
      className: "form-control",
      id: "floatingPassword",
      placeholder: "Password",
      label: "Password",
    },
  ];
  return (
    <main className='form-signin text-center d-flex justify-content-center'>
      <form className='col-6'>
        <h1 className='h3 mb-3 fw-normal'>Please sign up</h1>
        {columns.map((column) => {
          return (
            <InputItem
              onChangeEvent={column.onChangeEvent}
              value={column.value}
              type={column.type}
              className={column.className}
              id={column.id}
              placeholder={column.placeholder}
              label={column.label}
            />
          );
        })}
        <button
          className='w-100 btn btn-lg btn-primary'
          type='submit'
          onClick={(e) => {
            e.preventDefault();
            dispatch(userRegistation({ email, password, name, surName }));
            setPass("");
            setEmail("");
            setName("");
            setSurName("");
            navigator("/login");
          }}>
          Sign up
        </button>
      </form>
    </main>
  );
};
export default RegistrationForm;

Answer 1

You can manually work with the input.

const inputRef = useRef();

useEffect(()={
  const inputEl = inputRef.current;
  inputEl.value = "initial value";
  ...
  inputEl.addEventListenter("change", handleChange)
  return () => inputEl.removeEventListenter("change", handleChange);
});

return (
  ...
  <input ref={inputRef} ...
);

This is a sketch, you need to adapt it to your task.