状态更改时TextField失去焦点

Question

我将根据按钮的点击动态创建一个表单，因此当用户按下按钮时，该表单将生成一个新的ID。这样，我为createform计数器创建了这样的状态

const [formmakersno, setFormmakersno] = useState([0]);

在渲染中，我有这样的东西：

{formmakersno.map((no) => {
      return formDetails;
    })}

我的“ formDetails”是jsx的常量，它只返回诸如文本字段和按钮之类的表单元素。一切正常，每当我单击表单按预期生成的按钮时，但是，我想每次创建新表单作为道具时都传递计数器号，因为当它只是一个const返回时，我无法执行此操作一个jsx，我将其转换为箭头函数，以便可以传递道具并像这样传递它：

{formmakersno.map((no) => {
      return <formDetails value={no} />;
    })}

我也可以访问道具，但是问题是，每次我在文本字段中为每个字母键入文本时，文本字段都会失去焦点，因为它每次都会呈现一个组件，因为我正在调用带有状态的Onchange方法改变里面。有解决方法吗？

编辑：我创建了这个简单的示例，以进一步说明我面临的问题：

    export const CreatePush2 = () => {
  const [titles, setTitles] = useState(["", ""]);
  const [numbers, setNumbers] = useState([0, 1, 2]);

  const handleChange = (e, id) => {
    const { value } = e.target;
    let titles_1 = [...titles];
    let titles_11 = titles_1[id];
    titles_11 = value;
    setTitles(titles_1);
    console.log(titles);
  };

  const InputCreator = ({ id }) => {
    return (
      <form>
        <input type="text" onChange={(e) => handleChange(e, id)} value={titles[id]} />
        <br />
      </form>
    );
  };
  return (
    <div>
      {numbers.map((number) => {
        return <InputCreator key={number.toString()} id={number} />;
      })}
    </div>
  );
};

export default CreatePush2;

每个键入的字母都会使文本字段失去焦点。