MUI Fade component does not show, hide, or fade components

Question

I switched child components from conditional rendering to being wrapped by <Fade /> but Fade doesn't work at all, both components always display. Here is the current code:

// inside top level component
{/*{adminView === bodyViews.addNewCoupon &&*/}
<Fade
  in={Boolean(adminView === bodyViews.addNewCoupon)}
  timeout={2000}
>
  <AddCouponForm />
</Fade>
{/*}*/}
  
{/*{adminView === bodyViews.viewCurrentCoupons &&*/}
<Fade
  in={Boolean(adminView === bodyViews.viewCurrentCoupons)}
  timeout={2000}
>
  <ViewCoupons />
</Fade>
{/*}*/}

Based on the API here. I believe in set to true should cause the component to fade in. This worked for causing a conditional render in the commented out unary but does not seem to work within the in value. What mistake is being made?

Update

When I comment the custom components and inserting something like <p>Section 1/2</p> then the fade works. Something about the custom compoonents must cause the fade not to work

Answer 1

The issue was traced specifically back to Custom components: they don't seem to work as direct children of <Fade />. Issue is solved by wrapping the custom component children in a div.

  <Fade
    in={ Boolean(adminView === bodyViews.addNewCoupon) }
    timeout={ 4000 }
  >
    <div>
      <AddCouponForm />
    </div>
  </Fade>     

  <Fade
    in={ Boolean(adminView === bodyViews.viewCurrentCoupons) }
    timeout={ 4000 }
  >
    <div>
      <p>Section 2</p>
      <ViewCoupons />
    </div>
  </Fade>

As a side note, Fade also seems to have issues with more than one child. Therefore all children should go inside a single div element.