Material-ui Backdrop not covering buttons and other elements

How do I get the Backdrop to cover the button? No matter what I do, the buttons appear as if they were above the backdrop, I can't them move them behind it.

See code:

import React from "react";
import { Backdrop, Button } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({});

export default function App() {
  const classes = useStyles();
  const [test, setTest] = React.useState(true);

  return (
    <div className={classes.parent}>
      <Backdrop className={classes.backdrop} open={test}>
        <CircularProgress color="inherit" />
      </Backdrop>

      <Button
        variant="contained"
        color="secondary"
        onClick={() => {
          setTest(test ? false : true);
        }}
      >
        I should be behind the backdrop (click me)
      </Button>
    </div>
  );
}