How to view a button if the scroll window size increases and hide if the scroll window size decreases

I was creating a chat app in React.JS I have used firebase in the backend. Now I want to show a button if scrolled to a certain height and again hide the button if the scroll height is not matched in the message section. The button on click will scroll to the bottom of the screen and show the last message received. I also want to use an array as a dependency list to useEffect()

My code is

import React, { useState, useEffect } from 'react'
import Message from './Message';

function Messages({ messageDetails, userName }) {

    var scrollBottom = true;

    useEffect(() => {
        var element = document.querySelector('.ref');
        var arrowButton = document.querySelector(".arrowButton");
        if (scrollBottom === false) {
            window.preventDefault();
        }
        if (window.scrollY > 0) {
            scrollBottom = false;
            arrowButton.style.display = "block"; 
        }
        if (scrollBottom === true) {
            window.scroll({
                top: element.scrollHeight,
                left: 0,
            });
            arrowButton.style.display = "none";
        }

    })
    return (
        <>
            <div className="ref" >
                {messageDetails.map((message) =>
                    <div key={message.Time_Stamp} >
                        {
                            <Message
                                messageBy={message.Sender}
                                messageTime={message.Time}
                                message={message.Message}
                                userName={userName}
                            />
                        }
                    </div>)
                }
            </div>
            <button className="arrowButton"><i className="arrowDown"></i></button>
        </>
    )
}

export default Messages

CSS of the arrow button

    .arrowButton
    {
      position: fixed;
      bottom: 8vh;
      border-radius: 50%;
      background:#17a2b8;
      right:0;
      height:8vh;
      width:8vh;
      display:none;
    }
    .arrowDown
    {
      border: solid white;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }