polaris drop zone one single picture

dropzone.js

import React, { useCallback } from 'react'
import { DropZone, MediaCard } from '@shopify/polaris'

const ImageUploadDropZone = ({ files, setFiles }) => {
  const handleDropZoneDrop = useCallback(
    (_dropFiles) => setFiles([..._dropFiles]),
    []
  )

  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']

  const fileUpload = !files.length && <DropZone.FileUpload />
  const uploadedFiles = files.length > 0 && (
    <>
      <MediaCard
        title={files[0].name}
        primaryAction={{
          content: '他の写真をアップロード'
        }}
        description={files[0].size + ' bytes'}
      >
        <img
          alt=""
          width="100%"
          height="100%"
          style={{
            objectFit: 'cover',
            objectPosition: 'center'
          }}
          src={
            validImageTypes.indexOf(files[0].type) > 0
              ? window.URL.createObjectURL(files[0])
              : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
          }
        />
      </MediaCard>
    </>
  )
  return (
    <>
      <DropZone
        label="規格表示画像"
        accept="image/*"
        type="image"
        allowMultiple={false}
        onDrop={handleDropZoneDrop}
      >
        {uploadedFiles}
        {fileUpload}
      </DropZone>
    </>
  )
}

export default ImageUploadDropZone