Uncaught TypeError: files is undefined (in Firefox) - React DropZone (Next)

Question

I have a problem with the pound drop reaction zone, specifically with the mozilla browser. I cant open the file explore when clicking on the drop zone, after a while it shows the following error:

Uncaught TypeError: files is undefined

I have tested in other browsers like Edge and Chrome and they work correctly. Apparently, it is an error generated in the more specific mozilla. There are other setTimeOut errors, but it must be a consequence of this first one

next my code

export function UploadFile ({ description, acceptTypeImage, heightUpload = 18, widthUpload, subDescription = '', type }: IUploadsProps) {
  const { concatUplodadedExcelFiles, concatUplodadedImage, getSkusByExcelList } = useContext(CampaignContext)

  const [colorDropActive, setColorDropActive] = useState<string>('')

  const handleUploads = (files: File[]) => {
    const uploadFiles = files.map((file) => ({
      file,
      id: Math.floor(Date.now() * Math.random()).toString(36),
      name: file.name,
      progress: 0,
      uploaded: false,
      error: false
    }))

    console.log('está aqui')

    if (type === 'excel') {
      return handleUploadExcel(uploadFiles)
    }

    if (type === 'image') {
      return handleUploadImage(uploadFiles)
    }
  }

  const handleUploadExcel = (filesExcel: IFilesProps[]) => {
    concatUplodadedExcelFiles(filesExcel)
    filesExcel.forEach(getSkusByExcelList)
  }

  const handleUploadImage = (filesImages: IFilesProps[]) => {
    concatUplodadedImage(filesImages[0])
  }

  const renderDragMessager = ({ isDragActive, isDragReject, getInputProps }: IDragDrops) => {
    console.log('entrando aqui')
    if (!isDragActive) {
      setColorDropActive('blue.400')
      return (
            <>
                <Box
                    type='button'
                    value='Import'
                    width='49%'
                    cursor='pointer'
                    {...getInputProps()}
                />
                <Flex direction='column' align='center' justify='center'>
                    <BsCloudUploadFill size={50} color='blue'/>
                    <Text fontWeight='bold'>Insert</Text>
                    <Text fontSize='sm' marginLeft={5}>{description.active}</Text>
                   { subDescription !== '' && <Text fontSize='sm' marginLeft={5}>Types</Text>}
                </Flex>

            </>
      )
    }

    if (isDragReject) {
      setColorDropActive('red.800')
      return (
            <>
            <Box
                type='button'
                width='49%'
                cursor='block'
                {...getInputProps()}
            />
            <BiError size={23}/>
            <Text fontSize='sm' marginLeft={5}>{description.reject}</Text>
        </>
      )
    }

    setColorDropActive('green.400')

    return (
        <>
            <Box
                type='button'
                value={description.default}
                width='49%'
                cursor='pointer'
                {...getInputProps()}
            />
            <BsCloudUploadFill size={23}/>
            <Text fontSize='sm' marginLeft={5}>{description.default}</Text>
        </>
    )
  }

  return (
      <Fragment>
        <Container dir='column' p={0} m={0}>
            <DropZone
            accept={acceptTypeImage}
            onDropAccepted={handleUploads}
            >
                { ({ getRootProps, getInputProps, isDragActive, isDragReject }) => (
                    <Flex
                        border='1px dashed'
                        bg='white'
                        borderColor={colorDropActive}
                        borderRadius={4}
                        flexDirection='row'
                        alignItems='center'
                        justify='center'
                        height={heightUpload}
                        w={widthUpload}
                        {...getRootProps()}
                    >
                        {
                            renderDragMessager({ isDragActive, isDragReject, getInputProps })
                        }
                    </Flex>
                )}
            </DropZone>
        </Container>
    </Fragment>
  )
}