javascript – ¿ Por qué no puedo posicionar mi footer utilizando flex en react js?

que tal? quiero implementar un sticky footer utilizando reactjs y no estoy entendiendo la razón de por no funciona.

Necesito un footer que se quede pegado abajo en caso de que la página tenga poco contenido, pero que al mismo tiempo de haber mas contenido no aparezca hasta que se llegue al fondo de la misma en vez de quedar anclado y a la vista todo el rato.
El siguiente código CSS funciona tanto en vanilla JS como en react

footer{
       position: fixed ;
       bottom: 0 ;
       width: 100vw ;
}

Pero claro, el footer va a estar a la vista tengas poco o mucho contenido.

Y el siguiente código si posiciona el footer en el fondo en caso de haber poco contenido, pero no lo muestra hasta llegar al fondo en caso de que haya mucho contenido. Pero aunque esto si funciona en vanilla JS por alguna razón que no logro comprender no funciona para react.

body {
  display: flex ;
  flex-direction: column ;
  min-height: 100vh ;
}
.algún div  etc con contenido {
  flex-grow:  1 ;
}
footer {
  min-height: 18vh;
}

Bueno, si alguien sabe como puedo resolver este problema voy a estar muy agradecido, gracias :3