Why react rerender all elements in functional component on input change

I am trying to understand how to stop rerendering elements in functional component (or maybe I don't need to ?)

I am using single useState for all inputs and share the same onChange handler.

I have huge amounts of input fields in forms (100+) and whenever I type in any of them in dev tools profiler I see they all rerender, assuming this is because on each renders my onChange handler is "recreated" and all input elements rerender too. If I try to wrap it in useCallback nothing changes, but if I wrap my input element in Rect.memo component then it doesn't rerender.

    const MyInput = props => {
  return <input {...props} />;
};

const MyInputMemo = React.memo(props => {
  return <input {...props} />;
});

function App() {
  React.useDebugValue("test");

  const [formValues, setFormValues] = useState({
    name1: "test 1",
    name2: "test 2",
    name3: "test 3"
  });
  const [singleInput, setSingleInput] = useState("single input handler");

  const onHandleInputChange = e => {
    setFormValues({ ...formValues, [e.target.name]: e.target.value });
  };

  const onHandleInputChangeSingle = useCallback(e => {
    setSingleInput(e.target.value);
  }, []);

  return (
    <div className="App" style={{ padding: "30px" }}>
      <div>
        <h1>Test form</h1>
      </div>

      <form>
        <div>
          <label>shared onChange</label>
          <MyInput
            name="name1"
            value={formValues.name1}
            onChange={onHandleInputChange}
          />
        </div>
        <div>
          <label>shared onChange</label>
          <MyInput
            name="name2"
            value={formValues.name2}
            onChange={onHandleInputChange}
          />
        </div>
        <div>
          <label>shared onChange (memo)</label>
          <MyInputMemo
            name="name3"
            value={formValues.name3}
            onChange={onHandleInputChange}
          />
        </div>
        <div>
          <label>self onChanged</label>
          <input
            name="name4"
            value={singleInput}
            onChange={onHandleInputChangeSingle}
          />
        </div>
        <div>
          <pre>shared state:{JSON.stringify(formValues, null, 2)}</pre>
        </div>
        <div>
          <pre>single state: {JSON.stringify(singleInput, null, 2)}</pre>
        </div>
      </form>
    </div>
  );
}

here is simplified sandbox example

Am I profiling something wrong or is this normal behavior, should I be concerned about performance and if so how to fix it?