title: React useState failing to update two way binding
body: <p>I'm trying to set up so that when I type a name in the input of the Person component the state in the App component is updated and in turn updates the value of a prop in Person, however it appears the state change is happening, but the prop isn't updated, can anyone help me figure out what is wrong?</p>
  
  <p><strong>App</strong></p>
  
  <pre><code>const App = () =&gt; {
    const [persons, setPersons] = useState([
      {id: "key1", name: "Daniel", age: "28"},
      {id: "key2", name: "John", age: "30"},
      {id: "key3", name: "Doe", age: "60"}
    ]);
  
    const nameChangedHandler = (id, event) =&gt; {
      console.log(event.target.value);
      console.log(id);
      const personIndex = persons.findIndex(p =&gt; {
        return p.id === id;
      });
  
      const person = {
        ...persons[personIndex]
      };
  
      person.name = event.target.value;
  
      const pers = [...persons];
      persons[personIndex] = person;
  
      setPersons(pers);
      console.log(persons);
    };
  
    let people = persons.map((person, index) =&gt; {
      return (
        &lt;Person
          name={person.name}
          key={person.id}
          age={person.age}
          changed={nameChangedHandler.bind(this, person.id)}
        /&gt;
      );
    });
  
    return &lt;div className="App"&gt;{people}&lt;/div&gt;;
  };
  </code></pre>
  
  <p><strong>Person</strong></p>
  
  <pre><code>const person = props =&gt; (
    &lt;div className={style.Person}&gt;
      &lt;p onClick={props.click}&gt;
        I'm {props.name}, and I am {props.age}!
      &lt;/p&gt;
      &lt;input type="text" onChange={props.changed} value={props.name} /&gt;
    &lt;/div&gt;
  );
  </code></pre>