A very simple list with inputs that are supposed to be addable and updatable.
The problem occurs after I add one or more inputs and then try to type inside of one of the inputs - all inputs after the one being typed in disappear.

It has something to do with memo-ing the Item component and I'm looking to understand what exactly is happening there (valueChanged getting cached?). I can't wrap my head around.

Without the memo function the code works as expected but of course, all inputs get updated on every change.

Here's a gif of what's happening: <https://streamable.com/gsgvi>

To replicate paste the code below into an HTML file or take a look here: <https://codesandbox.io/s/81y3wnl142>

```
<style>
  ul {
    list-style-type:none;
    padding:0;
  }

  input[type=text] {
    margin:0 10px;
  }
</style>

<div id="app"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">

  const randomStr = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
  const { useState, memo, Fragment } = React

  const Item = memo(({ value, i, valueChanged }) => {

    console.log('item rendering...');

    return <li>
      <input type='text' value={value} onChange={e => valueChanged(i, e.target.value)}/>
    </li>
  }, (o, n) => o.value === n.value)

  const ItemList = ({ items, valueChanged }) => {

    return <ul>{
      items.map(({ key, title }, i) => (
        <Item 
          key={key} 
          i={i}
          value={title}
          valueChanged={valueChanged}
        />
      ))
    }</ul>
  }

  const App = () => {

    const [items, setItems] = useState([
      { key: randomStr(), title: 'abc' },
      { key: randomStr(), title: 'def' },
    ])

    const valueChanged = (i, newVal) => {
      let updatedItems = [...items]
      updatedItems[i].title = newVal
      setItems(updatedItems)
    }

    const addNew = () => {
      let newItems = [...items]
      newItems.push({ key: randomStr(), title:'' })
      setItems(newItems)
    }

    return <Fragment>
      <ItemList items={items} valueChanged={valueChanged}/>
      <button onClick={addNew}>Add new</button>
    </Fragment>
  }

  ReactDOM.render(<App/>, document.querySelector('#app'))

</script>

```