如何在react中访问FileList对象中的文件名？

问：

我正在尝试上传文件，然后将文件路径发送到后端的 API 以存储到数据库中，但是从创建的 FileList 对象检索文件名时遇到问题。

我有这个代码：

const RawForm = () => {
        const [filepath, setFilepath] = useState([])

        const handleUpload = (event) => {
               setFilepath([...filepath, event.target.files])
        }

        const handleSubmit = async (e) => {
               e.preventDefault()
               console.log(filepath)
               for (const file in filepath[0]){
                     console.log("files are: " + file)
               }
        
       return (
              <Upload onUpload={handleUpload}/>
              <Submit onSubmit={handleSubmit}/>
        )
  }

我有 2 个组件 Upload 和 Submit，其中 Upload 是上传按钮，定义如下： 它采用一个 onUpload 道具作为输入，我通过该道具传递一个设置文件的函数。

export default function Upload ({onUpload}) {
return (
    <div >
        <input
            style={{ display: 'none' }}
            id="upload-raw-files"
            multiple
            type="file"
            onChange={onUpload}
            
        /> 
        <label htmlFor="upload-raw-files">
            <Button 
            variant="contained"
            component="span"
            size="large"
            className="Upload"
            startIcon={<UploadIcon />}
            sx={{
                
                width: '130px',
                height: '40px',
                background: '#5985F7',
                border: '3px solid #5985F7',
            }}
            >
            Upload
            </Button>
        </label>
        
    </div>
) 
}

我还有提交组件，它只是一个按钮，我通过它传递一个功能来提交表单

export default function Submit = ({onSubmit}) => {
return (
    <div >
        <Button 
        onClick={onSubmit}
        variant="contained"
        size="large"
        className="Submit"
        sx={{
            width: '130px',
            height: '50px',
            background: '#5985F7',
            border: '3px solid #5985F7',
            borderRadius: '25px',
        }}
        >Submit
        </Button>
    </div>
) 
}

当我上传 3 个文件并单击提交，然后检查控制台时，我看到 FileList 对象如下所示： 但是使用我拥有的代码，打印到控制台的内容是这样的：

我无法弄清楚如何访问文件名。任何帮助将不胜感激！

我试过做

for (const file in filepath[0]){
        console.log("files are: " + file[0].name)
    }

只是为了看看我是否至少可以得到第一个对象的名称，但这给了我.files are: undefined