Tengo un componente que crea una lista de mensajes para un chat, la función scrollIntoView solo funciona cuando abro el chat por segunda vez (la primera vez, no se desplaza hasta el final). Adjunté algunas fotos y videos y algo de código.

 const queryClient = useQueryClient() const { data, isLoading } = useChatMessages(id) const { socket } = useSocket() const viewRef = useRef(null) useEffect(() => { socket.on('receive_message', (data) => { queryClient.setQueryData(['CHATMESSAGES', id], function(oldData) { return [...oldData, data] }) }) }, [socket]) useEffect(() => { viewRef.current && viewRef.current.scrollIntoView({behavior: 'smooth', block: 'start'}) }, [data]) if (isLoading) return <span>Loading...</span> return ( <div className={styles.chatMessages}> {data.map(message => ( message.sender_id !== 'x' ? <MessageReceived key={message.id} date={message.date} message={message.message} /> : <MessageSended key={message.id} date={message.date} message={message.message} /> ))} <div ref={viewRef} /> </div > ) }

Video: https://i.imgur.com/p3qqGZn.gif (Como puede ver, necesito desplazarme manualmente hasta el final) ¿Alguien puede ayudarme a resolver el error?