React项目中使用reactstrap的ModalHeader组件时出现元素类型无效错误的解决方案咨询

我正在跟着一份2021年的教程开发基于Django和React的待办应用，但运行时遇到了如下错误：

ERROR
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ModalHeader`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ModalHeader`.
    at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:14142:24)
    at createFiberFromElement (http://localhost:3000/static/js/bundle.js:14153:12)
    at reconcileChildFibersImpl (http://localhost:3000/static/js/bundle.js:10250:336)
    at http://localhost:3000/static/js/bundle.js:10308:31
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:11681:47)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:11792:5)
    at beginWork (http://localhost:3000/static/js/bundle.js:12404:16)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:7745:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:14989:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:14883:38)

我在名为modal.js的文件中导入了reactstrap的Modal相关组件，代码如下：

import React, { Component } from "react";

import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Input,
  Label,
} from "reactstrap";

export default class CustomModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItem: this.props.activeItem,
    };
  }

  handleChange = (e) => {
    let { name, value } = e.target;

    if (e.target.type === "checkbox") {
      value = e.target.checked;
    }

    const activeItem = { ...this.state.activeItem, [name]: value };

    this.setState({ activeItem });
  };

  render() {
    const { toggle, onSave } = this.props;

    return (
      <Modal isOpen={true} toggle={toggle}>
        <ModalHeader toggle={toggle}>Todo Item</ModalHeader>
        <ModalBody>
          <Form>
            <FormGroup>
              <Label for="todo-title">Title</Label>
              <Input
                type="text"
                id="todo-title"
                name="title"
                value={this.state.activeItem.title}
                onChange={this.handleChange}
                placeholder="Enter Todo Title"
              />
            </FormGroup>
            <FormGroup>
              <Label for="todo-description">Description</Label>
              <Input
                type="text"
                id="todo-description"
                name="description"
                value={this.state.activeItem.description}
                onChange={this.handleChange}
                placeholder="Enter Todo description"
              />
            </FormGroup>
            <FormGroup check>
              <Label check>
                <Input
                  type="checkbox"
                  name="completed"
                  checked={this.state.activeItem.completed}
                  onChange={this.handleChange}
                />
                Completed
              </Label>
            </FormGroup>
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button
            color="success"
            onClick={() => onSave(this.state.activeItem)}
          >
            Save
          </Button>
        </ModalFooter>
      </Modal>
    );
  }
}

看起来问题应该出在版本过时的Modal组件上，请问该如何解决这个错误？

备注：内容来源于stack exchange，提问作者Mohammed Baashar