ساخت المان لیست پیام ها با اسکرول خودکار در react js

import React, { useEffect, useState, useRef } from "react";

function Chat() {
    const [messageItem, setMessageItem] = useState([]);
    const container = useRef<HTMLDivElement>(null)

    const autoScroll = () => {
      try {
        const { offsetHeight, scrollHeight, scrollTop } = container.current;
        container.current?.scrollTo(0, scrollHeight);
      } catch (err) {}
    };

    useEffect(() => {
      autoScroll();
    }, [messageItem]);

    return (
        <div ref={container}>
            // messages
        </div>
    )
}