React Bootstrap - OverlayTrigger Tooltip positions incorrectly

I'm trying to implement a very simple Tooltip when you hover over a div element, but the tooltip shows in an incorrect position. I've tried many things with no luck. I'm using react-bootstrap 2.4.0. This is my code:

import { useEffect, useState } from "react";
import { Col, OverlayTrigger, Row, Tooltip } from "react-bootstrap";
import { GroupUserStatus } from "../utils/Constants";

function GroupUserCircle(props) {

    const [mail, setMail] = useState('')
    const [name, setName] = useState('')
    const [nameFirstLetter, setNameFirstLetter] = useState('')
    const [lastname, setLastname] = useState('')
    const [lastnameFirstLetter, setLastnameFirstLetter] = useState('')
    const [status, setStatus] = useState('')


    useEffect(() => {

        setMail(props.mail)
        setName(props.name)
        setLastname(props.lastname)
        setNameFirstLetter(props.name.slice(0, 1).toUpperCase())
        setLastnameFirstLetter(props.lastname.slice(0, 1).toUpperCase())
        setStatus(props.status)

    }, [props.mail,props.name, props.lastname, props.status])

    return (
        <>
            <OverlayTrigger placement="bottom" overlay={
                <Tooltip id={`userTooltip-${mail}`} >
                    <Row>
                        <Col>
                            {name} {lastname}
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            {GroupUserStatus[status]}
                        </Col>
                    </Row>
                </Tooltip>}>
                <div className="groupUserCircle text-center">
                    {nameFirstLetter} {lastnameFirstLetter}
                </div>
            </OverlayTrigger>
        </>
    )

}

export default GroupUserCircle;

And this is how it shows when you hover over the div element:

Can you guys help me identify what's the error?