material ui - react - dropzone preview in card

Question

I am working with React and Material ui, I would like to create a component like this:

It is basically a card component, on the bottom there is a dropzone ( material-ui-dropzone ). I would like that when the user upload an image with the dropzone, the image preview would be displayed in the middle of the card ( in the screenshoot I am in this situation ). Finally on the header there is an action button that allows the user to delete the image uploaded.

I'm not able to display the image.

This is my code:

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import DeleteIcon from 'img/header-icons/DeleteIcon';
import { CardHeader, IconButton } from '@material-ui/core';
import {DropzoneArea} from 'material-ui-dropzone'


const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 100,
  },
});

export default function ImageInput() {
  const [img, setImg] = useState(null)
  const classes = useStyles();

  const onDeleteImg = () => {
    setImg(null)
  }
  return (
    <Card className={classes.root}>
      <CardHeader
        action={
          <IconButton aria-label="settings" onClick={onDeleteImg}>
            <DeleteIcon/>
          </IconButton>
        }
      />
        <CardContent>
            {img &&<img src={img[0]?.path}/>}
        </CardContent>
      <CardActions>
      <DropzoneArea
        onChange={ i => setImg(i)}
        dropzoneText={''}
        />
      </CardActions>
    </Card>
  );
}

Any suggestions ? Thanks