MUI Base Modal Backdrop Not Registering Clicks

I am attempt to implement a Modal using MUI Base Modal component and scss modules for styling:

import { Modal as BaseModal, ModalProps as BaseModalProps } from '@mui/base';

const Backdrop = () => <div onClick={(event) => console.log(event)} className={classes.backdrop}></div>;
const MyModal = (...) => {

        <BaseModal
            className={`${classes.modal} ${className}`}
            open={open}  // prop from parent component
            onClose={(event, reason) => {
                console.log('inside modal onClose')
                console.log('event: ', event)
                console.log('reason: ', reason)
                console.log('calling onClose prop now...')
                onClose()  // prop from parent component
            }}
            slots={{ backdrop: Backdrop }}
            {...other}
        >
        ...
        </BaseModal>
}

When I hit esc, onClose triggers with the expected reason (onClose docs). But when I click on the backdrop, nothing happens. I had previously worked around this via ClickAwayListener but the MUI Base Modal Demos all have functioning backdrops without the need for the ClickAwayListener.

Any thoughts on possible discrepancies?

you shall forwardRef to the backdrop ...

const Backdrop = React.forwardRef<
  HTMLDivElement,
  { open?: boolean; className: string }
>((props, ref) => {
  const { open, className, ...other } = props;
  return (
    <div
      className={clsx({ 'base-Backdrop-open': open }, className)}
      ref={ref}
      {...other}
    />
  );
});