React js drag and drop Image with preview

I have this function for set my variable image and preview image:

const handleChangeImage = event => {     setPreviewImage(URL.createObjectURL(event.target.files[0]));    setImage( event.target.files[0] )}

and this one I just get the icon for dag and drop image:

<Box                                             backgroundColor="gray"          onChange={handleChangeImage}                                   >                               <PhotoOutlinedIcon         size="large"                                               /><Box><LabelImage>            Drag and Drop your Image Here</LabelImage>    <input             type="file"            style={{ display: 'none' }}            onChange={handleChangeImage}            ref={hiddenFileInput}               />                                            </Box></Box><Box>                                   <img         src={previewImage}         alt="Name Image"         width={150}    />                                          </Box>

so, I just want to do a Drag and drop image with preview, so currently it not work.

I was testing removing of input, the style display and I drag and drop one image, and preview image work, but I just want is display one icon, like:

so why don't work??? when I add display: 'none'