Implementé una función de chat en mi aplicación de reacción usando websockets que se ve así

Los mensajes se representan en un nuevo componente con la función de mapa. Cuando se hace clic, un div de posición absoluta se desliza desde la izquierda (traducido al 100 % en el eje x cuando está oculto y al 0 % cuando está a la vista) con la información del chat. Se parece a esto

Cuando se recibe un nuevo mensaje, utilizo la función de segmento de matriz para sacar un chat de la matriz y la función de cambio de matriz para colocarlo al comienzo de la matriz, de modo que el último chat siempre aparezca en la parte superior. Esto significa que cuando se abre un chat y se recibe un mensaje nuevo, se saca de la matriz y se hace visible el siguiente chat de la matriz.

Para ser más precisos, consulte la primera imagen. si test2@yahoo.com está abierto y se recibe un mensaje nuevo, test1@yahoo.com se activa ya que es el siguiente en la matriz.

Sé que este es el comportamiento esperado, pero ¿hay alguna forma de hacerlo y mantener un componente visible incluso después de que haya cambiado su posición en la matriz?