How to remove the gray part (backdrop) using css in offcanvass?

I'm using react-bootstrap and I don't know how to remove the backdrop or the gray area using css. I don't want to disable the backdrop from my react component code because it will no longer support the action where it allows to close the offcanvass when clicking outside of it.

This is the sample image:

function AdminOffcanvas() {
    const [show, setShow] = useState(true);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <section>
                <Navbar className="nav fixed-top ps-2 pe-2 sidenav-green" expand="lg">
                    <Navbar.Brand href="#home" className="fw-bold"><img className="davao-logo" src={dvologo} width="200px" height="40px" alt="logo" /></Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav" className="right-aligned">
                        <Nav >
                            <Nav.Link href="#link">Link</Nav.Link>
                            <NavDropdown align="end" id="basic-nav-dropdown" className="text-light"
                                title={
                                    <span>
                                        <IconContext.Provider value={{ size: "1.5rem" }}>
                                            <BsPersonFill />
                                        </IconContext.Provider>
                                    </span>} >
                                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </section>

            <section className="pt-5 mt-5">
                <Button variant="primary" onClick={handleShow}>
                    Launch
                </Button>

                <Offcanvas show={show} onHide={handleClose} className="min-media text-light">
                    <Offcanvas.Header closeButton>
                        <Offcanvas.Title>Offcanvas</Offcanvas.Title>
                    </Offcanvas.Header>
                    <Offcanvas.Body>
                        Some text as placeholder. In real life you can have the elements you
                        have chosen. Like, text, images, lists, etc.
                    </Offcanvas.Body>
                </Offcanvas>
            </section>
        </>
    );
}

export default AdminOffcanvas;

This is my CSS:

:root{
  --offcanvasWidth: 270px;
  --topsidebarHeight: 66px;
}

.min-media{
  width: var(--offcanvasWidth);
  background-color: #1AA47F;
}

@media (min-width: 992px) {
  .backdrop::before{
    display: none;
  }
  .min-media{
    transform: none;
    visibility: visible;
    top: var(--topsidebarHeight);
    height: calc(100% - var(--topsidebarHeight));
  }
}