Drawer Material-ui Close Drawer Function Issue

I’m using Material-UI at my React Project and Im trying create a component that render a drawer and some other components inside it. But I’m having a lot of issues with the open drawer function… I tried passing simply as a state props but then my drawer won’t close…

interface Props {
  cartOpen: boolean;
}
const CartDrawer: React.FunctionComponent<Props> = ({ cartOpen }) => {
  const classes = useStyles();
  return (
    <Drawer anchor="right" open={cartOpen}>
      <div className={classes.cartDrawerDiv}>
        <div className={classes.cartTitle}>
          <List>
            <ListItem>
              <ShoppingCartIcon className={classes.icon} />
              <Typography
                style={{
                  fontFamily: "Montserrat, sans-serif",
                  fontSize: "15px",
                  fontWeight: 800,
                  marginLeft: "8px",
                }}
              >
                1 Item
              </Typography>
            </ListItem>
          </List>
        </div>
        <Divider />
      </div>
    </Drawer>
  );
};
export default CartDrawer;

Example of a component using it…

...
<Button
              color="secondary"
              size="large"
              variant="contained"
              className={classes.buyButton}
              style={{ fontWeight: 600 }}
              onClick={() => setCartOpen(true)}
            >
              COMPRAR
            </Button>
          </div>
        </div>
      </div>
      <CartDrawer cartOpen={cartOpen} />

Answer

You should add onClose to close Drawer

<CartDrawer cartOpen={cartOpen} onClose={() => setCartOpen(false)} />

interface Props {
  cartOpen: boolean;
  onClose: () => void
}

const CartDrawer: React.FunctionComponent<Props> = ({ cartOpen, onClose }) => {
  const classes = useStyles();
  return (
    <Drawer anchor="right" open={cartOpen} onClose={onClose}>
...