在反应中传递动态元素中的输入数据

我有一个代码，可以在其中动态创建带有图像的组件并保存其状态。

状态存储在此数组中：

const [UploadLogos, setUploadLogos] = useState([0]);
const dynamicLogos = (id, url) => {
    setUploadLogos((el) => {
      let ArrayLogos = [...el]; 
      ArrayLogos[id] = url; 
      return ArrayLogos 
    })
};

代码按其应有的方式工作，而且在组件内部SimpleComponent有一个输入，我想在其中提供数据并保存此状态：

<input type="number" value={{}} onChange={() => {}} />

请告诉我该怎么做？谢谢你！

这是整个代码：

应用程序.js

import React, { useState } from 'react';
import { SimpleComponent } from './SimpleComponent ';

function App() {

  const [UploadLogos, setUploadLogos] = useState([0]);
  const dynamicLogos = (id, url) => {
        setUploadLogos((el) => {
          let ArrayLogos = [...el]; 
          ArrayLogos[id] = url; 
          return ArrayLogos 
        })
  };
  
  return (
    <div className="App">
      <button
        onClick={() =>
          setUploadLogos([...UploadLogos, UploadLogos.length])
        }
      >
        Add
      </button>
      {UploadLogos.map((logo, i) => (
        <SimpleComponent
          key={i}
          id={i}
          Image={logo}
          setImage={dynamicLogos}
        />
      ))}
    </div>
  );
}

export default App;

SimpleComponent.jsx

export function SimpleComponent({id, Image, setImage}) {
    return (
      <>
        <input 
            type="file" accept="image/*"
            onChange={event => { if (!event.target.files[0]) return; setImage(id, URL.createObjectURL(event.target.files[0])) }} 
        />
        <img src={Image} /> 
        <input type="number" value={{}} onChange={() => {}} />
      </>   
    )
}