im currently trying to create an dynamic form that uses a sub component to render out some input fields as createing them static would exceed a limit. I pass the states for the the form i made aswell as some date and the change form. But when i render the form as it does so fine! as soon as i change the state its sends a warning about uncontrolled components that you can read about it here

I have tried pre-setting all the fields with empty defaults but it doesnt help.

Am i doing it somewhat correct or totally wrong? or what is the correct way, or what am i doing wrong. thanks in adbance.

As for the code looks like this:

Edit.js

export default function InventoryItemEdit() {
  const [form, setForm] = useState({});

  function handleFormChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  const variants = (
    <ItemVariants
      form={form}
      onChange={handleFormChange}
      fields={form.sizes} 
      /* ^^ fields data fetched from the server i set via use effect hook when loading the page */
    />
  );

  const updateItem = async (event) => {
    event.preventDefault();
    /* Do form submit post */
  };

  return (
    <form onSubmit={updateItem}>
      <div>
        <p htmlFor="name">Name</p>
        <input
          id="name"
          name="name"
          onChange={handleFormChange}
          value={form.name}
          type="text"
          required
          placeholder="Name of Item"
        />
      </div>
      {variants}
    </form>
  );
}

As for the sub component ItemVariants it looke like this

ItemVariants.js

export default function ItemVariants({
  form = {},
  onChange = '',
  fields = [],
}) {
  return (
    <>
      {fields.map((row, index) => (
         <div>
           <span>
             {row.name}
           </span>
           <input
             type="text"
             id={`variant${index}`}
             name={`variant${index}`}
             onChange={onChange}
             value={form[`variant${index}`]}
             required
             min="0"
             placeholder="0"
             defaultValue="0"
           />
         </div>
      ))}
    </>
  );
}