如何在反应 typescript 挂钩中更改多个输入的值

Question

I am new to the react typescript world and I am currently trying to change the state of an object keys values with only one onChangeHandler, I was searching a lot and all that I could see was the same solution but it doesn't help, my current input fields are staying empty tho the event is triggered. I would appreciate the help.

    const [editAddress, setEdditAddres] = useState({
    houseNumber: '',
    houseName: '',
    flatNumber: '',
    street: '',
    addressLine2: '',
    town: '',
    postcode: '',
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setEdditAddres({
      ...editAddress,
      [name]: value,
    });
  };
<form>
            <TextInput
              label="House number"
              className="OrderDeliveryDetails__houseNumber"
              name="houseNumber"
              value={editAddress.houseNumber}
              id="houseNumber"
              error=""
              onChange={handleInputChange}
            />
            <TextInput
              label="House name"
              className="OrderDeliveryDetails__houseName"
              name="houseName"
              value={editAddress.houseName}
              id="houseName"
              error=""
              onChange={handleInputChange}
            />
            <TextInput
              label="Flat number"
              className="OrderDeliveryDetails__flatNumber"
              name="flatNumber"
              value={editAddress.flatNumber}
              id="flatNumber"
              error=""
              onChange={handleInputChange}
            />
            <TextInput
              label="Street (optional)"
              className="OrderDeliveryDetails__street"
              name="street"
              value={editAddress.street}
              id="street"
              error=""
              onChange={handleInputChange}
            />
            <TextInput
              label="Address line 2 (optional)"
              className="OrderDeliveryDetails__addressLine2"
              name="addressLine2"
              value={editAddress.addressLine2}
              id="addressLine"
              error=""
              onChange={handleInputChange}
            />
            <TextInput
              label="Town or city"
              className="OrderDeliveryDetails__town"
              name="town"
              value={editAddress.town}
              id="town"
              error=""
              onChange={handleInputChange}
            />
            <TextInput
              label="Postcode"
              className="OrderDeliveryDetails__postcode"
              name="postcode"
              value={editAddress.postcode}
              id="postcode"
              error=""
              onChange={handleInputChange}
            />
          </form>

Answer 1

I was able to fix it, the problem was hiding in the component which has no prop name and that leads to not being able to change the current value of an input, I saw this after I changed the component to a normal vanilla js and then it worked. So for future references just to know, check your props on your components. Thank you all for the help.