Remove default styling if FileUploader has children

Trying to overwrite the default style. This is the result

Notice the border behind the white div.

<DropZone>
                <div className="bg-white rounded-md shadow-lg">
                    <div className="items-center p-4 m-4 text-center border-4 border-dotted w-96 h-96">
                        <p className="self-auto">Drag and drop (Or click to drop) a MP4 file</p>

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="w-2/3 pt-8 m-auto h-2/3"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="gray"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
                            />
                        </svg>
                    </div>
                </div>
            </DropZone>

import { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

function DropZone(props) {
  const [file, setFile] = useState(null);
  const handleChange = file => {
    setFile(file);
    console.log(file.name)
  };
  return (
    <FileUploader 
        handleChange={handleChange} 
        name="file" 
        types={props.fileTypes} 
        hoverTitle="Drop Here!"
        children={props.children}
    />
  );
}
export default DropZone;

KarimMokhtar / react-drag-drop-files

Remove default styling if FileUploader has children #19