Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) in custom npm package

I'm working on a custom npm package (private) with a theme so I can use it across all my projects. I'm using react-datepicker in my package to create a custom DatePicker component

I have no trouble with exporting/importing a plain component that doesn't use react-datepicker, which was the solution to a number of questions regarding similar errors.

I created a plain component that returns a ReactDatePicker component without any additional props

import { FC } from 'react';
import ReactDatePicker from 'react-datepicker';

interface DatePickerProps {}

const DatePicker: FC<DatePickerProps> = () => {
  return <ReactDatePicker />;
};

export default DatePicker;

I export this component in my root index.ts file along with other exports

export { default as DatePicker } from './components/datePicker';

And then imported it in my NextJS (13) project

'use client';

import { DatePicker } from '@'; // custom package name

export default function Home() {

  return (
    <>
      <DatePicker />
    </>
  );
}

Which gives me an error

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

Check the render method of `DatePicker`.

here's my package.json

{
  "name": "",
  "version": "1.0.11",
  "description": "",
  "author": "",
  "license": "ISC",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "type": "module",
  "scripts": {
    "build": "tsup"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "peerDependencies": {
    "@chakra-ui/system": "^2.0.0",
    "@emotion/react": "^11.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@types/node": "^20.14.8",
    "@types/react-input-mask": "^3.0.5",
    "add": "^2.0.6",
    "framer-motion": "^11.2.12",
    "jest": "^29.7.0",
    "or": "^0.2.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tsup": "^8.1.0",
    "typescript": "^5.5.2",
    "yarn": "^1.22.22"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/react": "^2.8.2",
    "@chakra-ui/system": "^2.0.0",
    "date-fns": "^3.6.0",
    "react-datepicker": "^7.3.0",
    "react-input-mask": "^2.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "lib": ["dom", "esnext"],
    "jsx": "react-jsx",

    "module": "esnext",
    "moduleResolution": "node10",

    "declaration": true,
    "sourceMap": true,
    "outDir": "dist",
    "downlevelIteration": true,

    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true
  }
}

tsup.config.ts

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'], // Build for commonJS and ESmodules
  dts: true, // Generate declaration file (.d.ts)
  splitting: false,
  sourcemap: true,
  clean: true,
  target: 'es2019',
});

Try doing this:

`import ReactDatePicker from "react-datepicker";

const DatePicker =
(ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ??
ReactDatePicker;`

Source: https://github.com/Hacker0x01/react-datepicker/issues/3994#issuecomment-1786004616