Trying to memoize

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";



// Fix this bad React code
// See how slow it is to type into an input
// This is due to too many html elements in the dom updating at the same time
// Ensure only one input changes per event while keeping a composed list state as an array
// Hint: use the console tab on the bottom left hand corner to track updates
// Hint: You may need to split this into multiple components
const Component = () => {
let [list, setList] = React.useState(new Array(500).fill(""));
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
    {list.map((value, index) => {
    console.log(`This input #${index} rerendered!`);
    return (
      <input
        value={value}
        onChange={({ target: { value } }) => {
        let newList = [...list];
        newList[index] = value;
        setList(newList);
        }}
      />
      );
    })}
  </div>
  );
};



ReactDOM.render(<Component />, document.getElementById("root"));