ReactJS Uppy - Show images in Uppy Dashbaord after state changes

Hello
Uppy is working well with file uploading but Images are going to disappear when state changed, so is there any way to preserve image after upload. I found a very useful link on stackoverflow.com, I have the same problem. Please check this https://stackoverflow.com/questions/60201146/uppy-control-remove-uploaded-file-when-state-is-change

Unfortunately there are no answer, any help

Thanks in advance!!

import Uppy from '@uppy/core'
import XHRUpload from '@uppy/xhr-upload'
import Webcam from '@uppy/webcam'  
import { DragDrop, Dashboard } from '@uppy/react'  
  
import 'uppy/dist/uppy.css'
import '@uppy/status-bar/dist/style.css'
import '@styles/react/libs/file-uploader/file-uploader.scss'

const equipment_uppy = new Uppy({
      id: 'equipment_uppy',
      restrictions: { allowedFileTypes: ['image/*', 'video/*'] },
      autoProceed: false
    })
   
    equipment_uppy.on('file-added', (file) => {
      equipment_uppy.setFileMeta(file.id, {
        type: file.source,
        avintakeid : data.id
      })
    })
   
    equipment_uppy.use(XHRUpload, {
    endpoint: `${process.env.REACT_APP_SITE_URL}/api/auth/uploadavintakeimages`,
    formData: true,
    fieldName: 'files[]',
    headers: {
     Authorization: `Bearer ${localStorage.getItem('accessToken')}`
    }})
    
    equipment_uppy.use(Webcam)

<Dashboard   
uppy={equipment_uppy}  
id='equipment_location_image'
width='100%'
height='300px'
plugins={['Webcam']}
/>`

[dharmdeep]

Thanks a lot its worked for me by installing latest version & correct initialize for react.

[Murderlon]

Here is an example of the dashboard with react and state changes in the component. When used correctly, the dashboard stays the same even though the component re-renders.

Note: this example uses the latest major release. You are quite some versions behind.

https://codesandbox.io/s/kind-kare-vjzsd?file=/src/App.js