我是React的新手，我正在尝试功能组件。这可能是一个多方面的问题，但它是这样的：
我有一个父组件和一个子组件，我用useState创建了一个数组，其中包含了每个子组件初始化时使用的值。
例如：

function ParentComponent() {

    const [optionInputArr, setOptionInputArr] = useState < IOptionInput[] > (initialOptions);
     

return (
<div>
   {
      optionInputArr.map((item) => {
        return <OptionInput optionInput = {
          item
        }
        key = {
          item.key
        }
        />
      })
    }

</div>
)

}

所有内容都呈现得很好，但现在我有一个用例，需要访问QuestionInput组件中输入字段的值。
子组件：

function OptionInput(props: {optionInput: IOptionInput}){

    return (
        <>        
        <input></input>
        </>
    );

}

export default OptionInput;

我想到了一个将整个组件保存在ParentComponent中的方法，如下所示：

const[optionInputArr2, setOptionInputArr2] = useState<typeof OptionInput[]>([]);

我现在尝试在ParentComponent中初始化这些组件的集合，如下所示：

const initializeElems = ()=>{

     let props = {optionInput: {
            name: "",
            key: "",
            className: "",
            type: "",
            placeholder: ""
        }}

     let option1 = OptionInput(props);
        option1.key = props.optionInput.key; 

    setOptionInputArr2(option1);  // <-- results in Error

}

错误：
"Element"类型的参数不能赋给"SetStateAction〈（（props：{选项输入：I选项输入;=〉元素）[]〉'. ts（2345）
我肯定做错了什么，但我不确定是什么。
我还尝试这样创建组件：

let elem = React.createElement("OptionInput",props); 
setOptionInputArr2(elem); // <---- results in an Error

这似乎也不起作用。
类型为"React元素〈{选项输入：{名称：字符串;键：字符串;类名：字符串;类型：字符串;占位符：字符串;};}，字符串|"JSXElementConstructor〉"不能赋给类型为"SetStateAction〈（（属性：{选项输入：I选项输入;}）=〉元素）
我不知道这是否只是我，但错误是相当混乱，我正在寻找的功能基本上是这样的：
1.具有可以访问每个子组件状态的父组件
1.子组件包含自己的状态
我想错了吗？
编辑1：我想我应该使用UseRef（）钩子来做这件事，我还不确定，但我认为这样我可以访问子组件。