React Boostrap Modal Container not working - reactjs

Question

I'm trying to get a React Booststrap Modal working inside a container I've tried in many different ways but I'm not getting it to work inside the container (div), I honestly don't know why.
The code is a little long, so I will let you a snippet of the code.
MisListas.js
function MisListas() {
const listContainer=useRef(null)
return (
<div ref={listContainer}> //Here is the ref
// Some Code
<Row xs={2} sm={3} md={4} lg={4} xl={5}>
{search && search.map(product =>{
return (
<ListProduct
product={
{
...product,
BasePrice: product.Price,
FinalPrice: product.Price
}
}
container={listContainer}/>
)})}
</Row>
</div>
)
}
Product.js
This is the Modal:
function Product({product,container}) {
return(
<div>
<Modal
show={isOpen}
onHide={handleClose}
container={container.current}
backdrop={false}
enforceFocus={false}
className="modal-clase-productList"
>
//Some Code
</Modal>
</div>
)
}
This is a simplified version of the code. As you can see I am passing the ref (listContainer) as the container of the modal as container.ref. But the modal keeps taking the whole screen when it opens.
Any idea how can I make it work?