How to Show a div near Cursor position on hover in React js?

I have two Text Items, item1 and item2, and a div with some text inside. I want to keep the div hidden by default but show it at cursor position when I hover on Text item1 or item2. Please check the sample GIF animation in this Link: https://i.stack.imgur.com/e4lpB.gif

I tried this in Jquery code inside React. But it gives error.

$(".text-item").mouseenter(function (e) {
$(".box")
.css({
position: "absolute",
right: e.pageX,
top: e.pageY,
display: "block",
})
.show();
});