MUI Modal doesnt close

Question

I have an e-commerce website and I added a cart icon in the navbar. When clicked, a MUI modal should open (and it does) but it doesn't close anymore. I also added an "X" button with close function, but still nothing. What is happening?

Also, the component Navbar (that you can see in the code), is rendered in all the other components (pages) of the app.

//imports


const Container=styled.div`
height:100px;
//background-color:#d1bda4;
${mobile({ height: "50px" })}
`

const Wrapper=styled.div`
padding:15px 20px;
display: flex;
justify-content:space-between;
text-align:center;
align-items: center; 
${mobile({ padding: "10px 0px" })}
`
const Left=styled.div`
flex:1;
display:flex;
align-items:center;
${mobile({ flex: 2, justifyContent: "center" })}

`
const MenuItem=styled.span`
font-size:14;
cursor:pointer;
paddingLeft:20px;
flex:1;
${mobile({ fontSize: "12px", marginLeft: "10px" })}
`

const Center=styled.div`
flex:1;
${mobile({ fontSize: "12px", marginLeft: "10px" })}
`

const Brand=styled.h1`
font-weight:bold;
cursor:pointer;
${mobile({ fontSize: "24px" })}
`
const Right=styled.div`
flex:1;
display:flex;
align-items:center;
${mobile({ flex: 2, justifyContent: "center" })}
`

const MenuItemCart=styled.div`
paddingLeft:10px;
cursor:pointer;
`
const StyledLink = styled(Link)`
font-size:14;
cursor:pointer;
paddingLeft:20px;
flex:1;
text-decoration:none;
color:black;
${mobile({ fontSize: "12px", marginLeft: "10px" })}
`;

const MainContainer=styled.div`
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
overflow-y: auto;
width:100%;
overflow-y:scroll;
`
const HeaderContainer=styled.div`
display: flex;
flex:0.1;
width:100%;
height:1%;
justify-content:space-between;
flex-direction:row;
padding:20px;
`
const LeftContainer=styled.div`
display: flex;
flex:0.5;
flex-direction:column;
width:100%;
margin-right:50px;
`
const Button=styled.button`
width:30px;
height:30px;
border:0px #dcd3ca;
border-radius: 50px;
cursor:pointer;
`
const DeleteButton=styled.button`
width:30px;
height:30px;
border:0px white;
border-radius: 50px;
background-color:white;
cursor:pointer;
`

export const Navbarr = ({items}) => {
 

  const [user,  error] = useAuthState(auth);
  const [cartItems, setCartItems]=React.useState(0);
  const [open, setOpen] = React.useState(false);
  const [currentUserCart, setCurrentUserCart]=React.useState([]);
  const [currentProducts, setCurrentProducts]=React.useState([]);
  const [cartSubTotal, setCartSubtotal] = React.useState(0);

  const handleOpen = () => {  
    fetchProducts();
    setOpen(true); 
  };

  const fetchProducts=async()=>{
    let cart=[];
    let subTotal=0;
    let taxes=0;
    const productsRef=collection(db, "carts");
    const q=query(productsRef, where("userUID", "==", user?.uid));
    const docs=await getDocs(q);
    docs.forEach((doc)=>{
                 //cart.push(doc.data());
                 //subTotal+=doc.data().price;
                 console.log(doc.data());
                 cart=doc.data().products;
                 cart.forEach((product)=>{
                     subTotal+= product.quantity * product.price;
                 })
           })

           setCurrentProducts(cart);
           setCartSubtotal(subTotal.toFixed(2));
  }


  const handleClose = (e) =>{
    console.log('click');
    setOpen(false);
  };
  const fetchUserCartItems=async()=>{
  
      const q = query(collection(db, "carts"), where("userUID", "==", user?.uid));
      const doc = await getDocs(q);
      const data = doc.docs[0].data();
      let cartItemsClone=data.cartItems;
      setCartItems(cartItemsClone);
     
  } 

  React.useEffect(() => {
    fetchUserCartItems();
    fetchProducts();
  }, [user], []);


    return (
     <Container>
       <Wrapper>
         <Left>
         <StyledLink to='/quiz'>QUIZ</StyledLink>
           <StyledLink to='/products'>PRODUCTS</StyledLink>
           <MenuItem>REVIEWS</MenuItem>
         </Left>
           <Center>
             <Link to='/' style={{textDecoration:'none', color:'black'}}>
             <Brand to="/">SKINCE</Brand>
             </Link>
           </Center>
           <Right>
           <MenuItem>ABOUT</MenuItem>
           <StyledLink to='/login'>ACCOUNT</StyledLink>
           <StyledLink to='/cart'>CART</StyledLink>
           <MenuItemCart onClick={()=>handleOpen()}>
           <Badge badgeContent={items} sx={{
    "& .MuiBadge-badge": {
      color: "#FFFFFF",
      backgroundColor: "#D6C0B4"
    }
  }} ></Badge>
  <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
       
      >
        <Box sx={{position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 700,
  height: 700,
  bgcolor: 'background.paper',
  boxShadow: 24,
  overflowY: 'initial !important',
  p: 4,}}>
    <button onClick={(e)=>handleClose(e)}>X</button>
          <Typography id="modal-modal-title" variant="h6" component="h2" sx={{fontFamily:'Montserrat', textAlign:'center', paddingBottom:'10px'}}>
            Your cart
          </Typography>
          {currentProducts.length==0 && (
            <div style={{textAlign:'center', height:'50vh', paddingTop:'10%'}}>
<h2 > Your cart is empty! </h2> 
<h2>Check our products and choose the right one for you.</h2>
</div>
        )}

        {currentProducts.length>0 && (
<MainContainer>
<LeftContainer>
<HeaderContainer>
{/* <h3>Your cart</h3> */}
<h5>{cartItems} items</h5>
</HeaderContainer>
<TableContainer sx={{paddingTop:'10px'}} >
<Table sx={{ minWidth: 700}} aria-label="simple table">
<TableBody>
{currentProducts.map((row, key)=>(

<TableRow   sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell  sx={{width:'80px'}}>
 <img src={row.img.url} style={{width:'100%', height:'100%'}} />
 </TableCell>
 <TableCell align='left' sx={{width:'80px', fontFamily:'Montserrat', fontSize:'12px'}}> {row.productName} 
 <h6>{row.productBrand}</h6></TableCell>
<TableCell align='right' sx={{fontFamily:'Montserrat', fontSize:'12px'}}>{row.size}</TableCell>
<TableCell align='center' sx={{fontFamily:'Montserrat'}}>
 <Button>-</Button>
 </TableCell>
<TableCell align='center' sx={{fontFamily:'Montserrat', fontSize:'12px'}}> {row.quantity}</TableCell>
<TableCell  align='left' sx={{fontFamily:'Montserrat'}}>
 <Button>+</Button>
 </TableCell>
<TableCell align='right' sx={{fontFamily:'Montserrat', fontSize:'12px'}}>{row.price} €</TableCell>
<TableCell align='right' sx={{fontFamily:'Montserrat'}}>
 <DeleteButton>X</DeleteButton>
 </TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</LeftContainer>
<Divider orientation="horizontal" flexItem/>
<HeaderContainer>
  <h5>Subtotal</h5>
  <h5 style={{paddingRight:'70px'}}>{cartSubTotal} €     </h5>
</HeaderContainer>
</MainContainer>
        )}
    )
        </Box>
      </Modal>
           <ShoppingCartOutlinedIcon/>
           </MenuItemCart>
           </Right>
       </Wrapper>
     </Container>
    );
    
}