I'm building a multi tab chat like UI using react and antd, it looks like image below.

On the left side you can see multiple tabs showing last names using antd Tabs, on the right side I'm using antd comments to display each comment on the conversation thread

Now, the issue is that I'm trying to use useRef so it scrolls automatically to bottom when a new message is sent, and my code works, but only if I'm on the first tab or on the last one but no with the one on the middle and I'm stuck on finding out why

This is my code:

//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>

Thoughts?