scrollbar automatically scroll down as new divs are added reactjs

1import React, { useEffect, useRef } from 'react'
2
3const Messages = ({ messages }) => {
4
5  const messagesEndRef = useRef(null)
6
7  const scrollToBottom = () => {
8    messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
9  }
10
11  useEffect(scrollToBottom, [messages]);
12
13  return (
14    <div>
15      {messages.map(message => <Message key={message.id} {...message} />)}
16      <div ref={messagesEndRef} />
17    </div>
18  )
19}
20