react-tippy not being positioned properly on sidebar

Question

I am using @tippyjs/react": "^4.2.6 & the problem is that react-tippy not being positioned properly on sidebar of our dashboard, whenever there is content more than screen height and is scrollable the tippy button is placed more above than it is supposed to.

For example, when there is very little content on the right and there is no scroll bar tippy tool is positioned properly as shown in the image below:

But whenever there is more content than the screen height on the right and scroll bar appears tippy tool seems to be positioned wrong (A bit above than the button) as shown in image:

I checked multiple ways to figure / fix this but wasn't able to

The code I'm using is this for the button tippy tool is this:

import React from "react";
import Tippy from "@tippyjs/react";

const TippyReload = props => {
    return (
        <Tippy
            animation="fade"
            theme="custom"
            content="Refresh Count"
            placement="top"
            arrow={true}
            className={`custom-tippy`}>
                 {/* Wrap this component over the refresh icon, so this will be the refresh icon */}
                 {props.children}
        </Tippy>
    );
};

export default TippyReload ;