Problem with mui/base REACT library

Есть в данной библиотеке компонент Modal
При нажатии Esc данный компонент закрывается и функция onClose срабатывает
Если кликать по backdrop, а то есть вне самого модального окна, функция не срабатывает
Уже всю голову изъебал
Хелп
​

import { FunctionComponent } from "react";
import './signInModal.css'
import vkIcon from '../../img/icon/auth_vk_icon.png'
import googleIcon from '../../img/icon/auth_google_icon.png'
import InputModal from "../inputModal/inputModal";
import { Modal } from "@mui/base/Modal";

interface SingInModalProps {
isOpen: boolean
onClose(): void
}

const BackGround = () =>{
return (
<div className="modal_back"/>
)
}

const SingInModal: FunctionComponent<SingInModalProps> = (props) => {
return (
<Modal open={props.isOpen} onClose={props.onClose} slots={{backdrop: BackGround}} className="modal_default_settings">
<div className="modal_content">
<h1 id="modal_title" className="modal_title">Вход</h1>
<form method="POST" className="auth_modal">
<InputModal name="email" text="Ваш E-mail" placeholder="user@anytanks.com" isMail={true} type="email"/>
<InputModal name="password" text="Пароль" placeholder="Anytanks24!" isPass={true} type="password"/>
<button>Войти</button>
</form>
<h2 className="extra_method_title">Войти с помощью</h2>
<div className="extra_method">
<a href="#!">
<img src={vkIcon} alt="VK" />
</a>
<a href="#!">
<img src={googleIcon} alt="Google" />
</a>
</div>
</div>
</Modal>
)
}

export default SingInModal;

JS

import { FunctionComponent } from "react";

import './signInModal.css'

import vkIcon from '../../img/icon/auth_vk_icon.png'

import googleIcon from '../../img/icon/auth_google_icon.png'

import InputModal from "../inputModal/inputModal";

import { Modal } from "@mui/base/Modal";



interface SingInModalProps {

    isOpen: boolean

    onClose(): void

}



const BackGround = () =>{

        return (

            <div className="modal_back"/>

        )

}



const SingInModal: FunctionComponent<SingInModalProps> = (props) => {

    return (

        <Modal open={props.isOpen} onClose={props.onClose} slots={{backdrop: BackGround}} className="modal_default_settings">

            <div className="modal_content">

                <h1 id="modal_title" className="modal_title">Вход</h1>

                <form method="POST" className="auth_modal">

                    <InputModal name="email" text="Ваш E-mail" placeholder="user@anytanks.com" isMail={true} type="email"/>

                    <InputModal name="password" text="Пароль" placeholder="Anytanks24!" isPass={true} type="password"/>

                    <button>Войти</button>

                </form>

                <h2 className="extra_method_title">Войти с помощью</h2>

                <div className="extra_method">

                    <a href="#!">

                        <img src={vkIcon} alt="VK" />

                    </a>

                    <a href="#!">

                        <img src={googleIcon} alt="Google" />

                    </a>

                </div>

            </div>

        </Modal>

    )

}

 

export default SingInModal;