Wrap Avatar component in react-dropzone

[NgTienToan]

I have an task wrap Avatar component in react-dropzone but I cant match it.
Thank u for read and comment!!!

[kirill3333]

@NgTienToan what is your problem?
as far as I see you can place Avatar component inside this example like

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

function MyDropzone() {
  const [image, setImage] = useState(null)
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
   setImage(your image)
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <Avatar
          width={390}
          height={295}
          onBeforeFileLoad={this.onBeforeFileLoad}
          src={image}
        />
    </div>
  )
}

[NgTienToan]

I tried to get image from callback in react-dropzone . But not match with onCrop in Avatar component

[NgTienToan]

I created sanbox. Can u help me
https://codesandbox.io/s/sad-mcclintock-6tls06?file=/src/AvatarUpload.js