how to two way bind data input in react?

Question

consider that i have a data like this:

const[specs, setSpecs] = useState(['motherboard', 'ram', 'mouse'])

I need to somehow two way bind this to my input.

I was trying out something like this:

const handleOnChange = (e, spec, index) => {
  let data = specs;
  data[index] = e.target.value;
  setSpecs(data)
}

It does update in array but it doesn't reflect in the input box

{
  specs.map((spec, index) => {
    return <Row>
      <Col>
        <Form.Control key={spec} value={spec} 
          onChange={(e) => handleOnChange(e, spec, index)} type="text" />
        <br/>        
      </Col>
    </Row>
}

Answer 1

Finally I solved myself.

    const handleOnChange = (e, spec, index) => {  
        let data = [...specs];
        data[index] = e.target.value;
        setSpecs(data);
}

The reason why I didn't get i was mutating the state