Javascript 如何在React中设置动态字段的值？

我有CRUD的动态字段，我需要从那里更新数据，为此我必须设置API提供的数据值。提交功能正在运行，表单正在更新，问题在于设置输入值。起初我在考虑jquery函数（$document.ready），之后我使用了useEffect钩子，但这两个选项都不起作用，有什么帮助吗？下面是我的代码

export default function Pros(){

const [pros, setPro] = useState([
    {pro: ''}
])

const changePro = e => {

    let proArr = [];
    let prosObject = [...pros]
        prosObject.map(x => {
        proArr.push(Object.values(x));
    })

    setPro({
        pro: proArr
    })

}

const submitPro = e => {
    const {pro} = pros;
}

const handleChangePro = (index, event) => {
    const values = [...pros];
    values[index][event.target.name] = event.target.value;
    setPro(values);
}

const handleAddPro = () => {
    setPro([...pros, {pro: ''}])
}

const handleRemovePro = () => {
    const values = [...pros];
    let index = values.length-1;
    values.splice(index, 1);
    setPro(values);
}

useEffect(() => {
    return () => {
        $("#createPro").val('pro number 1'); <------ that was the way what im doing it, but doesn't work
    };
}, [])

return(
    <div className="form-group">

            {
                pros.map((pro,index) => (
                    <div key={index} className="mb-3 input-group"> 
                        <div className="input-group-append input-group-text">
                            <i class="fas fa-list"></i>
                        </div>
                        <input id="createPro" onChange={event => handleChangePro(index, event)} type="text" className="form-control" name="pro" placeholder="set pro"/>

                    </div>
                ))
            }

            <div className="invalid-feedback invalid-pros"></div>


        <div className="row">
            <div className="col-12 justify-content-center d-flex" >
                <IconButton className="mb-1 justify-content-center" onClick={() => handleRemovePro()}> 
                    <RemoveIcon/>
                </IconButton>
                <IconButton onClick={() => handleAddPro()}>
                    <AddIcon/>
                </IconButton>
            </div>
        </div>
    </div>
);

导出默认函数Pros（）{
const[pros，setPro]=useState([
{pro:'}
])
常量changePro=e=>{
设proArr=[]；
让prosObject=[…pros]
prosObject.map（x=>{
proArr.push（对象值（x））；
})
塞特普({
pro:proArr
})
}
const submitPro=e=>{
const{pro}=pros；
}
const handleChangePro=（索引、事件）=>{
常量值=[…赞成]；
值[index][event.target.name]=event.target.value；
setPro（值）；
}
const handleAddPro=（）=>{
setPro（[…pros，{pro:'}]）
}
const handleRemovePro=（）=>{
常量值=[…赞成]；
让索引=值。长度-1；
拼接值（索引1）；
setPro（值）；
}
useffect（（）=>{
return（）=>{
$（“#createPro”）.val（'pro number 1'）；简单地说，您需要为输入元素提供一个
value
属性，该属性从组件中的变量获取值
假设你有一个变量

let inputVal = 'some value'

你可以有：

<input value={inputVal} />

const [inputVal, setInputVal] = useState('some value')