<div {...getRootProps({style})} className="border border-gray-200 h-full">
<input {...getInputProps()} />
{
isDragAccept ?
(<p>Drop the files here ...</p>) :
(isDragReject ? (
<p>Invalid file type!</p>
):(
<p className="flex flex-col justify-center items-center">Drag 'n' drop some files here, or click to select files</p>
))
}


</div>

this is the code i have

const baseStyle = {
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '20px',
borderWidth: 2,
borderRadius: 2,
borderColor: '#eeeeee',
borderStyle: 'dashed',
backgroundColor: '#fafafa',
color: '#bdbdbd',
outline: 'none',
transition: 'border .24s ease-in-out'
};

const focusedStyle = {
borderColor: '#2196f3',
backgroundColor: '#f3f4f6',
};

const acceptStyle = {
borderColor: '#00e676',
backgroundColor: '#f3f4f6',
};

const rejectStyle = {
borderColor: '#ff1744',
backgroundColor: '#f3f4f6',
};

export default function Dashboard() {
const {
getRootProps,
getInputProps,
isFocused,
isDragAccept,
isDragReject
} = useDropzone({accept: {'video/mp4': []}});

const style = useMemo(() => ({
...baseStyle,
...(isFocused ? focusedStyle : {}),
...(isDragAccept ? acceptStyle : {}),
...(isDragReject ? rejectStyle : {})
}), [
isFocused,
isDragAccept,
isDragReject
]);
const onDrop = useCallback((acceptedFiles: Array<File>) => {
const file = new FileReader;

file.onload = function() {
setPreview(file.result);

}

file.readAsDataURL(acceptedFiles[0])
}, [])

const { acceptedFiles, isDragActive } = useDropzone({
onDrop
});

this part too