ReactBootstrapAccordion错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）

我正在努力处理我的第一个引导代码。

我想使用这里的react-bootstrap 代码添加一个手风琴。

我想我也已经导入了正确的库。

但我仍然有这个错误：
“错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从文件中导出您的组件它定义在，或者您可能混淆了默认和命名导入。”

如果有人可以帮忙，这是我的代码，非常感谢 ^^ Hugo

import React, { Component } from "react";
import { Accordion } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </Accordion.Body>
                    </Accordion.Item>
                    </Accordion>

                    {/* This is a 2nd method for an Accordion which is working for me  */}
                    <Accordion>
                      <Card>
                          <Accordion.Toggle as={Card.Header} eventKey="0">
                              TAB 1
                          </Accordion.Toggle>

                          <Accordion.Collapse eventKey="0">
                              <Card.Body>This is first tab body</Card.Body>
                          </Accordion.Collapse>
                      </Card>

                      <Card>
                          <Accordion.Toggle as={Card.Header} eventKey="1">
                              TAB 2
                          </Accordion.Toggle>

                          <Accordion.Collapse eventKey="1">
                              <Card.Body>This is second tab body</Card.Body>
                          </Accordion.Collapse>
                      </Card>
                  </Accordion>
              </div>
      );
  }
}

export default Maturite;

import React, { Component } from "react";
import { Accordion } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </Accordion.Body>
                    </Accordion.Item>
                    </Accordion>

                    {/* This is a 2nd method for an Accordion which is working for me  */}
                    <Accordion>
                      <Card>
                          <Accordion.Toggle as={Card.Header} eventKey="0">
                              TAB 1
                          </Accordion.Toggle>

                          <Accordion.Collapse eventKey="0">
                              <Card.Body>This is first tab body</Card.Body>
                          </Accordion.Collapse>
                      </Card>

                      <Card>
                          <Accordion.Toggle as={Card.Header} eventKey="1">
                              TAB 2
                          </Accordion.Toggle>

                          <Accordion.Collapse eventKey="1">
                              <Card.Body>This is second tab body</Card.Body>
                          </Accordion.Collapse>
                      </Card>
                  </Accordion>
              </div>
      );
  }
}

export default Maturite;