如何在React-Bootstrap中实现下拉动画？

import React, { useState, useEffect } from 'react';
import { Dropdown } from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';
import './DropdownAnimation.css';

const DropdownAnimation = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (event.target.closest('.dropdown-animation') === null) {
        setIsOpen(false);
      }
    };

    document.addEventListener('click', handleClickOutside);

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  return (
    <div className="dropdown-animation">
      <Dropdown show={isOpen}>
        <Dropdown.Toggle onClick={() => setIsOpen(!isOpen)}>
          Toggle Dropdown
        </Dropdown.Toggle>
        <CSSTransition
          in={isOpen}
          timeout={300}
          classNames="dropdown-animation"
          unmountOnExit
        >
          <Dropdown.Menu>
            <Dropdown.Item href="#action1">Action 1</Dropdown.Item>
            <Dropdown.Item href="#action2">Action 2</Dropdown.Item>
            <Dropdown.Item href="#action3">Action 3</Dropdown.Item>
          </Dropdown.Menu>
        </CSSTransition>
      </Dropdown>
    </div>
  );
};

export default DropdownAnimation;