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

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.


enter image description here

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 (
            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)}>
            <ExpandCircleDownIcon />
        <Collapse in={open}>{children}</Collapse>


  • 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.