What is the best way to use / implement the complex MDB comp

I am running into some challenges using some of the complex MDB components. Here is the error I get:

../../MDB/CollapsePage' does not contain an export named 'CollapsePage'

Below is how I implement MDB components. Any feedback or instructions on a better method would be greatly appreciated. If the MDB component is small, I just import { MDBComponentName } at the top of my React component and then place the <MDBComponentName  /> in the return statement of my React component.  But when the MDB component is complex, like CollapsePage, this is the process I use: Note: in this example, I'll show you how I tried to implement MDB's Accordion CollapsePage: https://mdbootstrap.com/react/advanced/collapse/#events

1. Create a new folder called MDB in my src
2. Create a file in the MDB folder called CollapsePage.js
3. Copy all the code from the CollapsePage example on MDB's website https://mdbootstrap.com/react/advanced/collapse/#events and paste it into my CollapsePage.js
4. Add the following at the top of the CollapsePage.js file: import React, { Component } from "react"; import {Card, Collapse, CardBody } from "mdbreact";
5. I add "export default" in front of "class CollapsePage extends Component"
6. I then navigate to the one of my react components where I want to import and use the newly create CollapsePage  component.
7. At the top of my react component, I type import {CollapsePage } from '../.../MDB/CollapsePage'
8. Then I place <CollapsePage  /> somewhere in the return statement of my react component and make sure everything is wrapped with a surrounding div.

As soon as I place <CollapsePage  /> in my return statement  I get the error:

../../MDB/CollapsePage' does not contain an export named 'CollapsePage'

 

---