Je rencontre un problème avec l'intégration d'un composant de réaction existant que j'ai trouvé dans mon application. "Tentative d'erreur d'importation:"

Mon objectif est d'apporter un composant de réaction existant (ci-dessous) que j'ai trouvé sur le Web, dans mon application pour l'utiliser. C'est une barre de navigation animée.

Voici le message d'erreur que je reçois après avoir essayé de compiler le code ci-dessous (extraits 2 et 3 ci-dessous):

import React from "react";
import Navbar from "../components/Navbar";
import Categories from "../components/Categories";

export default function ChooseACategory({ setSignedIn }) {
  return (
    <div>
      <Navbar setSignedIn={setSignedIn} />
      <Categories />
    </div>
  );
}

Il y a peut-être un problème avec la bibliothèque que j'ai installée? Le créateur avait réalisé ce composant il y a 7 mois, ici - https://www.npmjs.com/package/react-responsive-animate-navbar .

Quoi qu'il en soit, veuillez voir ci-dessous pour plus de détails sur 1. le composant que j'essaie d'apporter, 2. le composant dans mon code, légèrement refactorisé et 3. le fichier dans lequel j'importe ce composant.

C'est le composant que j'ai trouvé sur le Web. Il rend une barre de navigation impressionnante que je voudrais intégrer dans mon application. CEPENDANT, je n'ai jamais utilisé la syntaxe "class ... extend compoent". Je n'ai utilisé que le style "Exporter le nom de la fonction par défaut () {return ()}".

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";

export default function Navbar({ setSignedIn }) {
  return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/Explore" },
          { name: "ARTICLES", to: "/articles" },
          { name: "My Profile", to: "/profile" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }

Voici le composant depuis que je l'ai introduit dans mon application et que je l'ai légèrement remanié pour l'adapter à la syntaxe de réaction que j'ai utilisée.

./src/components/Navbar.js

npm install --save react-responsive-animate-navbar

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";
 
class Example extends Component {
  render() {
    return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/" },
          { name: "ARTICLES", to: "/articles" },
          { name: "ABOUT ME", to: "/about" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }
}

Et enfin, voici où j'essaye d'importer ce composant pour qu'il s'affiche sur une page réelle.

./src/Pages/IntroPage

Failed to compile.

./src/components/Navbar.js
Attempted import error: 'react-responsive-animate-navbar' does not contain a default export (imported as 'ReactNavbar').

Je soupçonne que le problème vient de ma refactorisation de la syntaxe "classe ... étend le composant" à la syntaxe "nom de la fonction par défaut d'exportation" (avec laquelle je suis plus familier). Je comprends qu'il n'y a pas une grande différence entre les deux, mais je préférerais garder mon code pour ce projet uniforme. Toute aide est la bienvenue!