I'm using the react Dropzone component and I need to do a conditional stylization to show if the file is accepted or rejected. It consists of changing the border color to red when the file is rejected and blue when it's accepted. MyDropzone

I need to allow just .csv and .dat files. It worked with accept parameter as "application/vnd.ms-excel" for csv . However, I didn't find the correct MIMEType for the .dat file. I tryed the following:

application/octet-stream

zz-application/zz-winassoc-dat

application/dat

When I put just ".dat" in the accept parameter, the input restriction works accepting just the .dat, but the conditional stylization doesn'work, because the variables isDragReject and isDragAccept take on incorrect values.

  const changeText=(isDragActive,isDragReject,isDragAccept)=>{

    return (
        <>
            <Typography sx={Styles.textBoard}>
                {(!isDragActive) && 'Drop files here or click to upload'}
                {(isDragActive && !isDragReject) && 'Drop files here'}
                {(isDragActive && isDragReject) && 'File not supported'}
            </Typography>
        </>
    )
}

<Dropzone accept={"application/vnd.ms-excel"} onDropAccepted={onUpload}>
            {({ getRootProps, getInputProps, isDragActive, isDragReject,isDragAccept }) => (
                <Box
                    {...getRootProps({
                        //loads the basic style
                        ...Styles.baseStyle,
                        //change the color in function of the file that 
                        //is being dragged over the area
                        ...(!isDragActive ? Styles.defaultStyle : {}),
                        ...(isDragReject ? Styles.rejectStyle : {}),
                        ...(isDragAccept ? Styles.acceptStyle : {})
                    })}
                        >
                    <CloudUpload className='ico' sx={Styles.uploadIcon}/>
                    {changeText(isDragActive,isDragReject)}
                    <input {...getInputProps()}/>
                </Box>
            )}
        </Dropzone>