如何在react.js组件中使用Bootstrap 5 Popover？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

npm install bootstrap@next

yarn add bootstrap@next

import React, { useState, useRef } from 'react';

const MyComponent = () => {
  const [showPopover, setShowPopover] = useState(false);
  const popoverRef = useRef();

  const handleButtonClick = () => {
    setShowPopover(!showPopover);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Toggle Popover</button>
      {showPopover && (
        <div ref={popoverRef} className="popover">
          This is the Popover content.
        </div>
      )}
    </div>
  );
};

export default MyComponent;

import React, { useState, useRef, useEffect } from 'react';
import { createPopper } from '@popperjs/core';

const MyComponent = () => {
  const [showPopover, setShowPopover] = useState(false);
  const popoverRef = useRef();
  const buttonRef = useRef();
  let popoverInstance;

  const handleButtonClick = () => {
    setShowPopover(!showPopover);
  };

  useEffect(() => {
    if (showPopover) {
      popoverInstance = createPopper(buttonRef.current, popoverRef.current, {
        placement: 'top',
      });
    } else {
      popoverInstance && popoverInstance.destroy();
    }

    return () => {
      popoverInstance && popoverInstance.destroy();
    };
  }, [showPopover]);

  return (
    <div>
      <button ref={buttonRef} onClick={handleButtonClick}>
        Toggle Popover
      </button>
      {showPopover && (
        <div ref={popoverRef} className="popover">
          This is the Popover content.
        </div>
      )}
    </div>
  );
};

export default MyComponent;

.popover {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}