问一个 react reusable 组件的的问题

import React, { Fragment} from 'react';

const App = () => {

  return (
    <div>
      <h1>My App</h1>

      <InputWithLabel
        id="search"
        label="Search"
        value={"1"}
      />
      <InputWithLabel
        id="search2"
        label="Search2"
        value={"2"}
      />
      <hr />
    </div>
  );
};

const InputWithLabel = ({
  id,
  label,
  value,
  type = 'text',
  onInputChange,
}) => (
    <Fragment>
      <label htmlFor={id}>{label}</label>

      <input
        id={id}
        type={type}
        value={value}
        onChange={onInputChange}
        autoFocus
      />
    </Fragment>
  );

export default App;

当我在 App 中 render 两个该组件时,发现 autoFocus 只有最后一个组件接收到了。为什么？？？