Estoy desarrollando una página con React. Mi código es como aquí ¿Cómo evitar que el teclado móvil se cierre cuando hago clic en el botón en el sitio web?

básicamente: solo una lista con un campo de entrada al final para el mensaje de chat y un botón para enviarlo.

La cuestión es que, cuando se muestra el teclado virtual, los últimos mensajes de chat están cubiertos por el teclado virtual que no es bueno y el usuario no entiende y ve el último mensaje que envió.

Pregunta aquí: ¿Cómo entender cuándo se muestra el teclado virtual móvil y cómo obtener su altura? Si puedo obtener altura, entonces dinámicamente puedo configurar el relleno inferior para mi lista de mensajes para que el usuario aún vea todo