React update state from JSX input element

I have a small React app.
The aim of this project is to manage products.
These products contain features.
The example below is for a page used to configure prices for product features.

export function App() {

  // This state is manage by HTTP calls
  const [features_dict, set_features_dict] = useState({"features": []});

  // I want to display the details of my list
  return (
    <div className={s.main_container}>
      <FeaturesDetail FeaturesDict={features_dict} />
    </div>
  )


}

My FeaturesDetail component

export function FeaturesDetail({FeaturesDict}) {

  const listFeaturesElement = FeaturesDict.features.map(feature =>
    <tbody>
      <td>{feature.name}</td>
      <td>
        <input
            type="number"
            value={feature.price}
        />
      </td>
      <td><button>Update</button></td>
    </tbody>
  );

  return (
    <div>
      <table>
        <thead>
          <td>Name</td>
          <td>Price</td>
        </thead>
        {listIngredientsElement}
      </table>
    </div>
  );

}

It seems like a React event prevent me to modify my input field.

My final goal is to update the features_dict state and run a function to send it in a HTTP call.
This HTTP call’ll update the product configuration in back-end database.