You don't. It is not recommended to use jQuery inside of a react application.

As React states in its documentation :

"Just because it’s possible, doesn’t mean that it’s the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance."

You can achieve this by simply using CSS (:hover & adjacent sibling selector)

You can also use a library which will do the trick for you, no need to reinvent the wheel

Here is a code sample to illustrate my words :

.tooltip-container {
  padding: 1rem;
  position: relative;
}

.tooltip-content {
  opacity: 0;
  visibility: hidden;
  
  background: #333;
  padding: 5px 10px;
  color: #fff;
  
  position: absolute;
  top: 0;
  left: 0;
  
  transition: all 0.3s;
}

.tooltip-hoverable:hover + .tooltip-content {
  opacity: 1;
  visibility: visible;
}

<div class="tooltip-container">
  <p class="tooltip-hoverable">
    Hover me
  </p>
  <span class="tooltip-content">I'm the tooltip</span>
</div>

you could use import $ from 'jquery'; and useEffect/componentDidmount

import { createRoot } from 'react-dom/client';
import TodoList from './refs/TodoList';
import { useEffect } from 'react';
import $ from 'jquery';

const App = () => {
    useEffect(() => {
        $("body").tooltip({ selector: '[data-bs-toggle=tooltip]', trigger : 'hover', html: true });
    }, []) 

    return (
        <div>
            <TodoList />
        </div>)
};

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);