Javascript ReactJS FilePond-上载到一个FilePond组件将清除同一页面中其他FilePond组件的状态

这个问题是关于ReactJS中的Filepond的。文件池文档在此：

[编辑]这里有一个只使用相关代码复制问题的独立代码沙盒：

我制作了这个组件，它是FilePond的包装器：

export const FormFilePond = ({ id, state, updateFormState, ...props }) => (
  <Box borderWidth={5} borderRadius={10} borderStyle='dashed'>
    <FilePond
      style={{'margin-bottom':0}}
      name={id}
      files={state}
      onupdatefiles={
        fileItems => {
          console.log("Updating filepond: ", id)
          updateFormState(id, fileItems.map(fileItem => fileItem.file))
        }
      }
      {...props}
    />
  </Box>
)

假设我有两个FilePond实例，其id为

s的
“foo”
和
“bar”
。首先，当我将文件上载到
“foo”
文件池时，控制台会记录：

Updating filepond:  foo
Updating filepond:  foo

我在FilePond组件中正确地看到了上传的文件，尽管我不明白为什么它会更新两次。[编辑以添加：当我控制台时，没有其他表单组件（输入、文本区域、复选框等）更新两次。记录更新，它们只记录一次。]然后，我尝试将图像上载到
“bar”
文件池。我明白了：

Updating filepond:  bar
Updating filepond:  bar
Updating filepond:  foo
Updating filepond:  bar

上述情况实际上是接二连三发生的：

当前两行记录到console时，我看到文件在一瞬间成功上传到bar组件，但随后：
后两行被记录到控制台，并且foo和bar组件的状态都被清除。两个文件池都丢失了文件，并且再次为空
为什么会发生这种情况，我如何修复它？我想要的行为是：拥有多个单独的文件池，用于跟踪该州不同地区的不同文件。最终用户应该能够将文件上载到所有用户。
我在Github上发布了相同的问题，并得到了答复：

这不是Filepond的一个小故障，而是我在React state中犯的一个逻辑错误。请参见此处的解释+参考资料：

（非常感谢Github用户sweetliquid的帮助。）

Updating filepond:  bar
Updating filepond:  bar
Updating filepond:  foo
Updating filepond:  bar