Warning: Failed prop type: Warning: Required prop `frame` was not specified in `FileDrop`

[Eduardo Carrada]

Hello!!
I using react-file-drop in next 12, but I don't know why the console is returning this warning.

This is my custom component

import { Box, CircularProgress, Typography } from '@mui/material'
import { useRef } from 'react'
import { FileDrop } from 'react-file-drop'
import UploadFileIcon from '@mui/icons-material/UploadFile'

export interface DragAndDropInterface {
  handleOnChangeFiles(e: FileList): void
  loading: boolean
}

export const DragAndDrop = ({
  handleOnChangeFiles,
  loading,
}: DragAndDropInterface) => {
  const fileInputRef: any = useRef(null)

  const onTargetClick = () => {
    if (!loading) {
      fileInputRef.current.click()
    }
  }

  const onFileInputChange = (event: { target: HTMLInputElement }) => {
    const { files } = event.target
    onChangeFile(files)
  }

  const onChangeFile = async (files: FileList[] | any) => {
    if (files) {
      handleOnChangeFiles(files)
    }
  }

  return (
    <Box className={loading ? 'loading' : ''} height="100%" width="100%">
      <FileDrop
        onTargetClick={onTargetClick}
        onDrop={(files) => onChangeFile(files)}
      >
        {loading ? (
          <>
            <CircularProgress />
            <Typography variant="subtitle2" mt="0.62rem">
              Loading...
            </Typography>
          </>
        ) : (
          <>
            <UploadFileIcon
              sx={{ fontSize: '2.62rem', color: 'primary.dark' }}
            />
            <Typography variant="subtitle2" mt="0.62rem">
              Choose or drop your file here
            </Typography>
            <input type="file" hidden />
            <input
              onChange={onFileInputChange}
              ref={fileInputRef}
              type="file"
              hidden
            />
          </>
        )}
      </FileDrop>
    </Box>
  )
}

[Kabir Sarin]

Is this rendering during SSR? https://github.com/sarink/react-file-drop/blob/master/file-drop/src/FileDrop.tsx#L82 the default frame is window.document, which would be undefined on the server, and then could throw this error https://github.com/sarink/react-file-drop/blob/master/file-drop/src/FileDrop.tsx#L66