React Full Calendar creating Minified React error #130

I am a student, and have an app I'm working on that utilizes the MDBReact full calendar feature. Upon deployment, my app works great except when I try to navigate to the calendar page. The calendar does not render and throws the Minified React error #130, which equates to:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I've scoured the web and asked other developers for help, but can't find any issues with the code. I'll post my calendar component below (leaving out some functions as they are irrelevant):

import React from "react";
import MDBFullCalendar from "mdb-react-calendar";
import { addDays } from "date-fns";
import UserContext from "../../utils/UserContext";
import API from "../../utils/API";

class CalendarPage extends React.Component {
  static contextType = UserContext;

  constructor(props) {
    super(props);
    this.state = {
      homework: [],
      classes: [],
      tasks: [],
    };
  }

  componentDidMount() {
    const { user } = this.context;
    // Load the state with homework, class info, and tasks
    this.setState({ tasks: user.activities });
    this.setState({ homework: user.homework });
    this.getClassInfo(user.classes);
  }

  componentDidUpdate(_, prevState) {
    if (this.state.homework !== prevState.homework) {
      this.checkHomework();
    }

    if (this.state.classes !== prevState.classes) {
      this.checkClasses();
    }
  }

  onChange = async (e) => {
    let { user, setUser } = this.context;
    this.setState({ tasks: user.activities });
    // Setting new task list (e) to state, context, and database
    if (e.length !== this.state.tasks.length) {
      setUser({ ...user, activities: e });
      this.setState({ tasks: e });
      await API.setActivities(e);
    }
  };

  render() {
    const arrOfObjects = [
      { color: "elegant-color", title: "Test", dark: true },
      { color: "danger-color", title: "Homework Due", dark: false },
      { color: "warning-color", title: "Meeting", dark: false },
      { color: "secondary-color", title: "Lunch", dark: false },
      { color: "default-color", title: "Activity", dark: false },
      { color: "primary-color", title: "Appointment", dark: false },
      { color: "info-color", title: "Class", dark: true },
      { color: "success-color", title: "Other", dark: false },
    ];

    return (
      <MDBFullCalendar
        colors={arrOfObjects}
        tasks={this.state.tasks}
        btnSizes="sm"
        onChange={this.onChange}
      />
    );
  }
}

export default CalendarPage;

Any ideas on why this won't render? My package.json:

{
  "name": "study-check",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "engines": {
    "node": "12.18.0",
    "npm": "6.14.4"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "date-fns": "^2.16.1",
    "mdb-react-calendar": "file:package",
    "mdbreact": "git+https://oauth2:**key here**@git.mdbootstrap.com/mdb/react/re-pro.git",
    "react": "^16.13.1",
    "react-datepicker": "^3.1.3",
    "react-dom": "^16.13.1",
    "react-icons": "^3.11.0",
    "react-iframe": "^1.8.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-select": "^3.1.0",
    "serve": "^11.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Thank you!