Dropzone ui package, image preview not appearing

Question

I've just installed (https://www.npmjs.com/package/dropzone-ui) and I actually can see that the file items were loaded and file icon preview is shown when I drop some files on the dropzone, but not getting previews when file is an image. Am I doing something wrong?

check out my code:

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";

export default function MyDropzone() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);

  const updateFiles = (incomingFiles) => {
    console.log("incoming files", incomingFiles);
    setFiles(incomingFiles);
  };

  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };

  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFileSize={40000}
      label="Drag'n drop your files here or click to browse"
      accept="image/*"
      fakeUploading
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          info
        />
      ))}
    </Dropzone>
  );
}

You can check what I've got on the UI here: screenshot

Answer 1

Add preview attribute

{files.map((file) => ( <FileItem {...file} onDelete={removeFile} preview info /> ))}