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

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.

Answer 2

Fade updates the child component via the styles prop, if you're using a custom component you need to forward the ref to the child and make sure the props from Fade are passed down:
const MyComponent = React.forwardRef((props, ref) => {
return (
<div {...props} ref={ref}>
my component
</div>
);
});
<Fade in={checked}>
<MyComponent />
</Fade>
Live Demo