When I click on a button, I have a Material UI dialog box pop up successfully (yay!). Now I just want it to be full screen rather than only a small portion of the screen. I am trying to follow along in the Material UI API for the dialog box, but my box is not appearing full screen. Is there some sort of disconnect that I am missing here? Thanks a lot in advance (sorry if this is a noob question).

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import PhotoScrolling from './PhotoScrolling';

/* const useStyles = makeStyles({
    imageSlider: {
      backgroundColor: 'yellow',
      color: 'black',
      width: 400,
    },
  }); */

export default function FormDialog() {
    // const classes = useStyles();
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
            Open form dialog
        </Button>
        <Dialog 
            open={open} 
            onClose={handleClose} 
            aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title"
            fullScreen={true}
            fullWidth={true}
            >Section Title</DialogTitle>
                <PhotoScrolling></PhotoScrolling>
            <DialogActions>
            <Button onClick={handleClose} color="primary">
                Close
            </Button>
            </DialogActions>
        </Dialog>
        </div>
    );
}