ReactJS DropZone browser attempts to open file on drop - reactjs

Question

Trying to implement the Dropzone component but not have much luck. Am I missing something here?
import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import styled from 'styled-components';
export const FilDataForm = (props) => {
const [files, setFiles] = useState([])
const getColor = (props) => {
if (props.isDragAccept) return '#00e676';
if (props.isDragReject) return '#ff1744';
if (props.isDragActive) return '#2196f3';
return '#eeeeee';
}
const onDrop = (file) => {
console.log('HERE!!!!!')
let nf = files;
nf.push(file)
setFiles(nf)
}
const Container = styled.div`
flex:1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-width: 2px;
border-radius: 2px;
border-color: ${props => getColor(props)};
border-style: dashed;
background-color: #fafafa;
color: #bdbdbd;
outline: none;
transition: border .24s ease-in-out;
`
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone(onDrop);
return (
<div className="modal">
<div className="dialog" style={{ width: "25%", marginBottom: "50px" }}>
<div className="header"><h2>File Uploader</h2></div>
<div className="content">
<Container {...getRootProps({ isDragActive, isDragAccept, isDragReject })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</Container>
<div className="grid-container" style={{ marginTop: "20px", height: "250px" }}></div>
</div>
</div>
</div>
)
}
Dragging the file(s) into the drop area causes the browser to launch a new tab attempting to open the file. Any help is appreciated.
EDIT
Clicking in the Dropzone does not open the file dialog either.

Answer 1

You need to prevent the default event.
I'm using Class component based React Dropzone and this is how i have stopped the default event.
{...getRootProps({
className: 'dropzone',
onDrop: (event) => event.preventDefault(),
})}
Complete Code
<Dropzone onDrop={ (files) => fileHandling(files) } >
{({ getRootProps, getInputProps }) => (
<div
{...getRootProps({
className: 'dropzone',
onDrop: (event) => event.preventDefault(),
})}
style={{ border: '1px solid #707070' }}
>
<input {...getInputProps()} />
<h3 style={{ cursor: 'pointer' }}>
Drag & Drop file or click here to Upload
</h3>
</div>
)}
</Dropzone>
Hope it helps