如何解决当我动态添加一个新的输入字段时单选按钮和选择字段会重置

我试图创建一个输入字段的堆栈，我希望能够在页面上动态地添加一个新的输入字段。我把默认字段存储在一个数组状态中，当我想添加一个新的字段时，我使用setArr()来添加一个新的字段，使用spread operator。问题是，每次我创建一个新字段时，radiobutton和select字段的值都会被重置。

import React, { useState } from "react";

export default function StackState() {
  const [arr, setArr] = useState([
    <input type='text' />,
    <input type='radio' />,
    <select>
      <option disabled selected>
        Disabled
      </option>
      <option>One</option>
      <option>Two</option>
    </select>,
  ]);

  const handleAdd = () => {
    setArr((e) => [<input type='text' />, ...e]);
  };

  return (
    <div>
      <div>{arr.map((e) => e)}</div>
      <button onClick={handleAdd}>Add Me</button>
    </div>
  );
}