Changing the Color of the Drawer in Material-UI React

Hi I wanted to change the Background Color of my MUI Drawer. I have been looking for Days but found nothing. Here is my Header Code:

import { AppBar, Toolbar, Typography, makeStyles, Button, IconButton, Drawer, Link, MenuItem } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import MenuIcon from "@material-ui/icons/Menu";
import logo from "./Icon.png";

const useStyles = makeStyles (() => ({
    header: {
        backgroundColor: "#1b1b1b",
        paddingRight: "0px",
        paddingLeft: "18px",
        "@media (max-width: 900px)": {
            paddingLeft: 0,
        },
    },
    menuButton: {
        fontFamily: "Inter, sans-serif",
        fontWeight: 700,
        size: "18px",
        marginLeft: "38px",
    },
    toolbar: {
        display: "flex",
        justifyContent: "space-between",
    },
    drawerContainer: {
        padding: "20px 30px",
        color: "inherit",
    },
}));

const headersData = [
    {
        label: "Featured",
        href: "/featured",
    },
    {
        label: "Favorites",
        href: "/favorites",
    },
    {
        label: "My Account",
        href: "/account",
    },
    {
        label: "Discord",
        href: "/discord",
    }
];

export default function Header() {
    const [state, setState] = useState({
        mobileView: false,
        drawerOpen: false
    });

    const { mobileView, drawerOpen } = state;

    useEffect(() => {
        const setResponsivness = () => {
            return window.innerWidth < 900
            ? setState((prevState) => ({ ...prevState, mobileView: true }))
            : setState((prevState) => ({ ...prevState, mobileView: false, drawerOpen: false }));
        };

        setResponsivness();
        window.addEventListener("resize", () => setResponsivness());

        return () => {
            window.removeEventListener("resize", () => setResponsivness());
        }
    }, []);

    const { header, menuButton, toolbar, drawerContainer } = useStyles();
    const displayDesktop = () => {
        return (
            <Toolbar className={toolbar}>
                <a href="/">{smomodsLogo}</a>
                <div>{getMenuButtons()}</div>
            </Toolbar>
        )
    };

    const getDrawerChoices = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Link
                    {...{
                        component: RouterLink,
                        to: href,
                        color: "inherit",
                        style: { textDecoration: "none" },
                        key: label,
                    }}
                >
                    <MenuItem>{label}</MenuItem>
                </Link>
            )
        })
    }

    const displayMobile = () => {
        const handleDrawerOpen = () =>
            setState((prevState) => ({ ...prevState, drawerOpen: true }));
        const handleDrawerClose = () =>
            setState((prevState) => ({ ...prevState, drawerOpen: false }));
        return (
            <Toolbar>
                <IconButton
                    {...{
                        edge: "start",
                        color: "inherit",
                        "aria-label": "menu",
                        "aria-haspopup": "true",
                        onClick: handleDrawerOpen,
                    }}
                >
                    <MenuIcon/>
                </IconButton>
                <Drawer
                    {...{
                        anchor: "left",
                        open: drawerOpen,
                        onClose: handleDrawerClose,
                    }}
                >
                    <div className={drawerContainer}>{getDrawerChoices()}</div>
                </Drawer>
                <div><a href="/">{smomodsLogo}</a></div>
            </Toolbar>
        )
    }

    const smomodsLogo = (
        <Typography variant="h6" component="h1">
            <img src={logo} alt="SMOMods" width={224} height={70}/>
        </Typography>
    )

    const getMenuButtons = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Button
                    {...{
                        key: label,
                        color: "inherit",
                        to: href,
                        component: RouterLink,
                        className: menuButton
                    }}
                >
                    {label}
                </Button>
            );
        });
    };

    return (
        <header>
            <AppBar className={header}>{mobileView ? displayMobile() : displayDesktop()}</AppBar>
        </header>
    );
}

The Drawer uses Material-UI in ReactJS. I would like to have an answer asap. I am really new to React and it’s my first time using it. I have added something like BackgroundColor: “#1b1b1b” to the code before but it only changed the Background Color behind the buttons and not the full Drawer!