I have a component called Dialog. When the user click on a button, the Dialog component will mount and return a list of conversation between sender and receiver, just like a chat box. I want it when the component renders, it will scroll to the bottom because the latest chat should be at the bottom like we see in facebook messenger or any other chat app. I was using scrollIntoView but unfortunately it seems not working in mobile view and I have to make sure our application also works in mobile. I don't know if there is any better way to do this?

Following is my example code:

function DialogContents() {
    const scrollRef = useRef(null);

    useEffect(() => {
        scrollRef.current?.scrollIntoView({
            behavior: "smooth",
            block: "end",
            inline: "nearest",
        });
    }, []);

    return (
            <div
               className="dialog-item pb-5 mt-4"
               ref={scrollRef}
            > 
               <div>...dialog content...</div>
            </div>