controlled input value is not changing when the state change but change when using useRef hook

Question

i am looping on array of object and each one should be a div with input

formInputs={[
       {
         title: "الأسم",
         name: "name",
         required: true,
         state: productName,
         setState: setProductName,
         type: "text",
       },
       {
         title: "السعر",
         name: "price",
         required: true,
         state: productPrice,
         setState: setProductPrice,
         type: "number",
       },
       {
         title: "الكميه",
         name: "quantity",
         required: true,
         state: productQuantity,
         setState: setProductQuantity,
         type: "number",
       },
     ]}

these inputs are in a modal when i open the modal to edit the input it gives me it's last value eventhou the state is upto date

{formInputs.map((formInput, i) => {
            return (
              <div className="input-div" key={formInput.name}>
                <label>{formInput.title}</label>
                <p>{formInput.state}</p> // this is my state and it changes well 
                <input
                  {...register(formInput.name)}
                  ref={(e) => (inputsRef.current[i] = e)} // workes only with this line 
                  onChange={(e) => {
                    console.log("cahnge");
                    formInput.setState(e.target.value);
                  }}
                  value={formInput.state}
                />
                <p>{errors[formInput.name]?.message}</p>
              </div>
            );
          })}

it only workes by adding the ref to every input and i don't know why can anyone helps me ?