Quiero usar el componente <Grow></Grow> del material ui.

todo lo que se encuentre entre la etiqueta <Grow> debería tener el efecto de transición.

¡este código debería funcionar correctamente pero no es así! el <Grow> no está funcionando.

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

lo extraño es que cuando borro un <div> funcionará correctamente...

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

pero si elimino otro div, ¡no volverá a funcionar!

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

¿Alguien sabe por qué?