Estoy creando un chat de múltiples pestañas como UI usando reaccionar y antd, se parece a la imagen a continuación.

En el lado izquierdo, puede ver varias pestañas que muestran los apellidos usando las pestañas antd, en el lado derecho estoy usando comentarios antd para mostrar cada comentario en el hilo de conversación

Ahora, el problema es que estoy tratando de usar useRef para que se desplace automáticamente hacia abajo cuando se envía un nuevo mensaje, y mi código funciona, pero solo si estoy en la primera pestaña o en la última pero no con el uno en el medio y estoy atascado en averiguar por qué

Este es mi código:

 //reference and scroll function const myRef = useRef(null); const executeScroll = () => {myRef.current.scrollIntoView({ behavior: "smooth" })}; //useEffect associated to the source of the chat messages array useEffect(executeScroll, [BuzonDataAgrupado]); //And the Tab component <Tabs tabPosition='left' onChange={handleTabChange}> { Object.entries(BuzonDataAgrupado).map(([tabName, mensajes]) => { return( <TabPane tab={tabName} key={tabName}> <Card className='buzon-container'> <div style={divStyle}> {mensajes.map((mensaje) => { return( <Comment className='buzon-message-sent' key={mensaje._id} author={<a>{mensaje.nombreFamilia}</a>} content={<p>{mensaje.Texto}</p>} datetime={ <Tooltip title {moment(mensaje.Fecha).format('YYYY-MM-DD HH:mm:ss')}> <span>{moment(mensaje.Fecha).fromNow()}</span> </Tooltip>}/> )//return })} //map //This is the reference where is scrolls to at the end of message list <div ref={myRef}></div> </div> <Divider /> <div className='buzon-message-editor'> <Form.Item> <TextArea rows={2} onChange={handleMensajeChange} value={NuevoMensaje} /> </Form.Item> <Form.Item> <Button htmlType="submit" loading={SendingMessage} onClick={sendMessage} type="primary">Enviar mensaje</Button> </Form.Item> </div> </Card> </TabPane> )}) } </Tabs>

¿Pensamientos?