react-bootsrap tooltips positions itself wrong on first render

Question

Hi I am using bootstrap 5.2.1 and react-bootsrap 2.5.0 in my project. I am trying to use a tooltip with component. But when I hover over the badge tooltip overflows from the page and scrollbars mementarily activates. then it fixes itself. but this causes a flicker on the page. Am I missing something? here is the component

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import { Badge, OverlayTrigger, Tooltip } from "react-bootstrap";
import { BugFill, Globe, ListTask, PcDisplay, Search, Wrench, } from "react-bootstrap-icons";

function TaskTypeDisplay(props) {

    const getType = (taskType) => {

        let itaskType = parseInt(props.taskType)
        switch (itaskType) {
            case 1:
                return { color: "bg-warning text-dark", object: <Wrench /> };
            case 2:
                return { color: "bg-warning text-dark", object: <Globe /> };
            case 3:
                return { color: "bg-primary", object: <PcDisplay /> };
            case 4:
                return { color: "bg-danger", object: <BugFill /> };
            case 5:
                return { color: "bg-dark", object: <Search /> };
            case 6:
                return { color: "bg-primary ", object: <ListTask /> };
            default:
                return { color: "bg-primary", object: "" };
        }
    }

    return (
        <>
            <OverlayTrigger placement="right"
                overlay={
                    <Tooltip >
                        aaaaaaaaaa
                    </Tooltip>
                }
                >
                <Badge className={getType(props.taskType).color}> {getType(props.taskType).object} </Badge>
            </OverlayTrigger>
        </>);
}

export default TaskTypeDisplay;

"wrong positioning" is my guess. I am not sure.