tolltip in react js

1import React, { useState, useEffect } from 'react';
2import { Button, UncontrolledTooltip } from 'reactstrap';
3
4const shortText = 'Hi';
5const longText = 'Long tooltip content to test update';
6
7const TooltipContent = ({ update }) => {
8  const [text, setText] = useState(shortText);
9
10  useEffect(() => {
11    const intervalId = setInterval(() => {
12      setText(text === shortText ? longText : shortText);
13      update();
14    }, 1000);
15
16    return () => clearInterval(intervalId);
17  });
18
19  return (
20    <>{text}</>
21  );
22}
23
24const Example = () => {
25  return (
26    <div className="text-center">
27      <Button id="updateTooltip">Click me</Button>
28      <UncontrolledTooltip placement="top" target="updateTooltip" trigger="click">
29        {({ update }) => (
30          <TooltipContent update={update} />
31        )}
32      </UncontrolledTooltip>
33    </div>
34  );
35}
36
37export default Example;