React booststrap Dropdown não está funcionando.

Imagino que não tenha nada a ver com o curso, mas estou fazendo um projeto e estou tendo um problema com o Dropdown Menu do bootstrap. Ele não fecha, mas quando eu fui inspecionar o elemento o mesmo se encontrava com o aria-expanded= false quando clicado fora no menu. Esse é meu código:

interface BreadcrumbProps {
  breadcrumbItems?: [
    {
      label?: string;
      url?: string;
    }
  ];
}

export const Breadcrumb: React.FC<BreadcrumbProps> = ({ breadcrumbItems }) => {

  const [mouseHover, setMouseHover] = useState(false);
  function handleMouse() {
    setMouseHover(!mouseHover);
  }  

  return (
    <div>
      <Breadcrumbs>
        <Dropdown autoClose>
          <Dropdown.Toggle
            onMouseOver={handleMouse}
            onMouseOut={handleMouse}
          >
            <IconHome color={mouseHover ? "#252728" : "#5C5E62"} /> Item
          </Dropdown.Toggle>

          <Dropdown.Menu >
            <Dropdown.Item>Teste</Dropdown.Item>
            <Dropdown.Item>Teste</Dropdown.Item>
            <Dropdown.Item>Teste</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>

        <Dropdown.Toggle>Catálogo</Dropdown.Toggle>
        <Dropdown.Toggle>Produto</Dropdown.Toggle>
        <p>Visão geral</p>
      </Breadcrumbs>
    </div>
  );
};