Estoy creando una aplicación de chat y, como este tipo de aplicaciones funcionan cada vez que envía un mensaje nuevo, la vista debe desplazarse hacia abajo y mostrar el mensaje nuevo.

La pregunta es que cuando el componente se muestra por primera vez, se desplaza hacia abajo, pero cuando hago clic para enviar un mensaje nuevo, no lo hace. Se agrega un nuevo mensaje pero no se desplaza. Lo que realmente no entiendo es que en Firefox funciona como se esperaba pero no en Chrome.

Mensajero.jsx

 const [messages, setMessages] = useState([]); const scrollRef = useRef(); .... const handleSubmit = async () => { const data = { conversationId: currentChat._id, sender: user._id, text: input, }; const response = await newMessage(data); setMessages([...messages, response]); setInput(''); setIsDisabled(true); }; useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); ... <div className='chat-box__top'> {messages.length > 0 && messages.map((message) => ( <div ref={scrollRef} key={message._id}> <Message className='message' own={message.sender._id=== user._id} message={message} /> </div> ))} </div> .... <button className='chat-box__submit' onClick={handleSubmit} disabled={isDisabled}> <SendIcon className='icon' /> ---.</button>

CSS de mensajería

 .chat-box__top{ padding-right: 10px; overflow-y: auto; }