React: “Element type is invalid” when trying to render a modal component

I’m working on a React project and encountering this error when trying to open a modal:

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.

Here’s my file structure:

src/
├── Components/
│   ├── Modals/
│   │   ├── MainModal.jsx
│   │   └── CategoryModal.jsx
└── Screens/
    └── Dashboard/
        └── Admin/
            └── Categories.jsx

CategoryModal.jsx

import React from "react";
import MainModal from "./MainModal";

function CategoryModal({ modalOpen, setModalOpen }) {
  return (
    <MainModal modalOpen={modalOpen} setModalOpen={setModalOpen}>
      <div className="inline-block sm:w-4/5 border border-border md:w-3/5 lg:w-2/5 w-full align-middle p-10 overflow-y-auto bg-main text-white rounded-2xl">
        <h2 className="text-3xl font-bold">Create</h2>
      </div>
    </MainModal>
  );
}

export default CategoryModal;

Categories.jsx

import React, { useState } from "react";
import SideBar from "../SideBar";
import { CategoriesData } from "../../../Data/CateporiesData";
import { HiPlus } from "react-icons/hi";
import Table2 from "../../../Components/Table2";
// Make sure this path is correct - verify the actual location of your CategoryModal component
import CategoryModal from "../../../Components/Modals/CategoryModal";

function Categories() {
  const [modalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
  };

  return (
    <SideBar>
      {/* Modal component */}
      <CategoryModal modalOpen={modalOpen} setModalOpen={setModalOpen} />
      <div className="flex flex-col gap-6">
        <div className="flex items-center justify-between gap-2">
          <h2 className="text-xl font-bold">Categories</h2>
          <button
            onClick={openModal}
            className="bg-main flex cursor-pointer items-center gap-2 font-medium transition hover:bg-subMain border border-red-500 text-white py-2 px-4 rounded"
          >
            <HiPlus /> Create
          </button>
        </div>

        <Table2 data={CategoriesData} users={false} />
      </div>
    </SideBar>
  );
}

export default Categories;

MainModal.jsx

import { Dialog, Transition } from "@headlessui/react";
import React, { Fragment, useRef } from "react";
import { IoClose } from "react-icons/io5";

function MainModal({ modalOpen, setModalOpen, children }) {
  const cancelButtonRef = useRef();
  return (
    <>
      <Transition show={modalOpen} as={Fragment} appear>
        <Dialog
          as="div"
          className="fixed inset-0 z-30 overflow-y-auto text-center"
          initialFocus={cancelButtonRef}
          onClose={() => setModalOpen(false)}
        >
          <div className="min-h-screen px-4">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0"
              enterTo="opacity-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0"
            >
              <Dialog.Overlay className="fixed inset-0 bg-black opacity-60" />
            </Transition.Child>
            
            {/* This element is to trick the browser into centering the modal contents. */}
            <span
              className="inline-block h-screen align-middle"
              aria-hidden="true"
            >
              &#8203;
            </span>
            
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              {children}
            </Transition.Child>
            
            <div className="absolute right-5 top-5">
              <button
                onClick={() => setModalOpen(false)}
                type="button"
                className="inline-flex transition justify-center px-4 py-2 text-base font-medium text-white bg-subMain rounded-full hover:bg-white hover:text-red-500"
              >
                <IoClose />
              </button>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  );
}

export default MainModal;

I’ve confirmed:

The component is exported with export default

The import path is correct (triple-checked)

I restarted the dev server

But the error persists.

Any ideas why this might be happening?