I want to use the <Grow></Grow> component of material ui.

everything between the <Grow> tag should has the transition effect.

this code should work properly but it doesn't! the <Grow> is not working.

{activeMenu === 'menu1' ? 
<div>
   <Grow in={true}>
       <div>
           <IndexFormStep1Component/>
       </div>
   </Grow>
</div>
:
<div>
  <Grow in={true}>
      <div>
         <SecondFormComponent/>
     </div>
  </Grow>
</div> 
}

the weird thing is when I delete one <div> it will work properly...

{activeMenu === 'menu1' ? 
<div>
   <Grow in={true}>
       <div>
           <IndexFormStep1Component/>
       </div>
   </Grow>
</div>
:

<Grow in={true}>
    <div>
       <SecondFormComponent/>
   </div>
</Grow>
 
}

but if I delete another div it won't work again!

{activeMenu === 'menu1' ? 

<Grow in={true}>
   <div>
       <IndexFormStep1Component/>
   </div>
</Grow>

:

<Grow in={true}>
    <div>
       <SecondFormComponent/>
   </div>
</Grow>
 
}

does anybody know why?