I am implementing a chat view in React,and the desired behavior is that whenever new data is pushed into the dataSource, the chat view (an infinite list) scrolls to the bottom, there are many implementations, some found here: How to scroll to bottom in react?. However when I try to implement it, I am getting this strange behavior where all the views in the window are "pushed upward" out of sight by some 300px, as if to accomadate this new <div> that is at the bottom of the list view. My implementation below:

        import React, {useEffect, useRef} from "react";
        import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
        import InfiniteScroll from 'react-infinite-scroll-component';


        const row_1 = 2.5;
        const row_chat = 4

        const useStyles = makeStyles((theme: Theme) => createStyles({

            container: {
                width: '40vw',
                height: `calc(100vh - 240px)`,
                position: 'relative',
                padding: theme.spacing(3),  
            },

        }));


        const chat_container_style = {
            width: '40vw',
            height: `calc(100vh - 240px - ${row_chat}vh - ${row_1}vh)`,
        }




        function ChatView(props) {

            const classes = useStyles();
            const { _dataSource } = props;

            // scroll to bottom
            const messagesEndRef = useRef(null)
            const scrollToBottom = () => {
                messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
            }
            useEffect(() => {
                scrollToBottom()
            }, [_dataSource]);


            return (
                <div className={classes.container}>


                    {/* chat window */}
                    <InfiniteScroll
                        dataLength={_dataSource.length}
                        next={() => { return }}
                        hasMore={true}
                        loader={<></>}
                        style={chat_container_style}
                    >
                        {_dataSource.map((item, index) => {
                            return (
                                 <div {...props} key={index} item={item}>
                                    {`item: ${index}`}
                                 </div>
                            )
                        })}

                        {/* putting an item here push all divs upward */}
                        <div ref={messagesEndRef} />
                    </InfiniteScroll>


                </div>
            )


        }

Note the use of <InfiniteScroll/> is not the cause of the behavior, Really if I put the ref={messagesEndRef} into any view, it pushes all the views up in the viewport.