Ok so have done it this way see if that helps you. Not a very react(y) way of doing it though.

return (
    <OverlayTrigger placement="top" overlay={this.tooltip} onEntering={this.entering}>
                    <Button">Hover on me</Button>
    </OverlayTrigger>
);

tooltip = (
    <Tooltip id="tooltip"><strong>This is the tooltip. Yeah!</Tooltip>
);

// Set your color here
entering = (e) => {
    e.children[0].style.borderTopColor = 'green';
    e.children[1].style.backgroundColor = 'green';
};

Without using refs / React DOM, you can select tooltips by data-toggle attribute:

componentDidMount() {
  $('[data-toggle="tooltip"]').tooltip();
}

componentDidUpdate() {
  $('[data-toggle="tooltip"]').tooltip();
}

Source: Bootstrap documentation

Note, if you're loading jQuery by CDN, you can refer to it by window.$ as well.

You don't need to use react-bootstrap at all since Bootstrap 5 is now vanilla JavaScript...

You can import Bootstrap 5 JS components like this (note .esm version for modular importing)...

import { Tooltip } from 'bootstrap.esm.min.js'

then you can refer to the Tooltip like this...

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    return () => {
      tooltipList.map(t => t.dispose())
    }

React Bootstrap Tooltip example