Uncaught TypeError: type.getCollectionNode is not a function when using `DropdownSection` in NextUI with a custom component

I’m new to React and am using the NextUI library for my project. I want to create a custom function component, ProfDropdownItem, to render multiple DropdownSection components within a DropdownMenu. However, I’m encountering an error:

Uncaught TypeError: type.getCollectionNode is not a function

Here’s the code that is causing the issue:

import React from 'react';
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Avatar } from '@nextui-org/react';

const ProfDropdownItem = () => {
  return (
    <DropdownSection title="Actions" showDivider>
      <DropdownItem key="new" shortcut="⌘N" description="Create a new file">
        New file
      </DropdownItem>
      <DropdownItem key="copy" shortcut="⌘C" description="Copy the file link">
        Copy link
      </DropdownItem>
      <DropdownItem
        key="edit"
        shortcut="⌘⇧E"
        description="Allows you to edit the file"
      >
        Edit file
      </DropdownItem>
    </DropdownSection>
  );
};

const TopBar = () => {
  return (
    <Dropdown placement="bottom-end">
      <DropdownTrigger>
        <Avatar
          isBordered
          as="button"
          className="transition-transform"
          color="secondary"
          name="User Name"
          size="sm"
          src="profilePhotoURL"
        />
      </DropdownTrigger>
      <DropdownMenu aria-label="Profile Actions" variant="flat">
        <ProfDropdownItem />
      </DropdownMenu>
    </Dropdown>
  );
};

export default TopBar;