React.js Mui Collapse component only animates the transition when closing, never when opening

Question

Every project I use this Collapse component from Mui library i get the issue of my Collapse only animates the transition if i'm closing the component (when in={false}). When opening, it waits a moment (which should be animating) and then just renders the children at once. Have anyone encountered this problem before? It still works, but it annoys me each time more.

ilustration:

This is the latest code snippet i'm running on this issue:

import React, { useState } from "react"
import { Box, Collapse, MenuItem } from "@mui/material"
import ExpandCircleDownIcon from "@mui/icons-material/ExpandCircleDown"

interface CollapsibleMenuProps {
    title: string
    children?: React.ReactNode
}

export const CollapsibleMenu: React.FC<CollapsibleMenuProps> = ({ title, children }) => {
const [open, setOpen] = useState(false)

return (
    <Box
        sx={{
            gap: "5vw",
            color: "primary.main",
            fontSize: "1.2rem",
            borderBottom: "1px solid",
            borderColor: "primary.main",
            flexDirection: "column"
        }}>
        <MenuItem sx={{ justifyContent: "flex-start" }} onClick={() => setOpen((value) => !value)}>
            {title}
            <ExpandCircleDownIcon />
        </MenuItem>
        <Collapse in={open}>{children}</Collapse>
    </Box>
)
}

Answer 1

In case anyone get here with the same problem, found it: I was using a default css file which contained a rule to display all div as flex:

div {
    display: flex;
}

deleting it solved my issue, then I replaced it with:

.MuiBox-root {
    display: flex;
}

in order to keep my default display as flex on Mui Box. .MuiPaper-root for paper and .MuiGrid-root for grid components.