Problem Bundling React Typescript Project with Rollup

I have a Typescript React Project and bundle it using rollup. My config files are:

tsconfig.json

{
"compilerOptions": {
    "outDir": "dist",
    "noImplicitAny": true,
    "module": "esnext",
    "target" : "es6",
    "lib": ["es6", "es7", "dom"],
    "jsx": "react",
    "allowJs": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "Node"
},
"include": ["src/**/**/*"],
"exclude": ["node_modules/**", "**/*.spec.ts", "dist"]
}

rollup.config.js

import typescript from "rollup-plugin-typescript";
import commonjs from "rollup-plugin-commonjs";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import nodeResolve from "rollup-plugin-node-resolve";
import postcss from 'rollup-plugin-postcss'
// import babel from 'rollup-plugin-babel';
import pkg from "./package.json";
const globals = {
  react: 'React',
  'react-dom': 'ReactDom',
  'react-datepicker2': 'DatePicker',
};
const plugins = [
  peerDepsExternal(),
  nodeResolve({
    mainFields: ['module'],
    extensions: ['.ts', '.tsx']
  }),
  commonjs({
    include: ["node_modules/**"],
    extensions: ['.ts', '.js'],
    namedExports: {
      "node_modules/react/react.js": [
        "Children",
        "Component",
        "PropTypes",
        "createElement"
      ],
      "node_modules/react-dom/index.js": ["render"]
    }
  }),
  typescript(),
  postcss(),
]
export default {
  input: "src/index.ts",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      exports: "named",
      sourcemap: true
    },
    {
      file: pkg.module,
      format: "es",
      exports: "named",
      sourcemap: true
    }
  ],
  plugins,
  external: ['react', 'react-dom', 'react-datepicker2'],
};

package.json

   "main": "dist/bundle.js",
  "module": "dist/bundle.es.js",
  "files": [
    "build"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --mode=development --config webpack.dev.js --open --hot",
    "build": "rollup -c",
    "compile": "webpack"
  },
  "author": "synapps",
  "license": "ISC",
  "dependencies": {
    "@types/jest": "^26.0.20",
    "@types/react-select": "^4.0.15",
    "react-select": "^4.3.0",
    "react-textarea-autosize": "^8.3.2",
    "react-datepicker2": "^3.3.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.12.16",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@types/moment-jalaali": "^0.7.4",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.2.4",
    "eslint": "^7.25.0",
    "eslint-plugin-react": "^7.23.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.1.0",
    "moment-jalaali": "^0.9.2",
    "postcss": "^8.2.13",
    "react": "^17.0.2",
    "react-datepicker2": "^3.3.13",
    "react-dom": "^17.0.2",
    "react-jss": "^10.5.1",
    "rollup": "^2.41.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-eslint": "^7.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-typescript": "^1.0.1",
    "rollup-plugin-typescript2": "^0.30.0",
    "style-loader": "^2.0.0",
    "ts-lint": "^4.5.1",
    "tslib": "^2.2.0",
    "tslint-react": "^5.0.0",
    "typescript": "^4.2.4",
    "typings-for-css-modules-loader": "^1.7.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-datepicker2": "^3.3.13",
    "@types/node": "^14.14.31",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "@types/react-select": "^4.0.15"
  },

When I bundle and import it in another project I face this error:

  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem

I search a lot and I know that I should externalize react to do not face a conflict of using more than one version of react. Besides I Could solve this issue with WebpackAlias, and I use customize-cra package to solve this issue.

config.overrides.js

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
    addWebpackAlias({
        ['react']: path.resolve('./node_modules/react')
    })
);

But other issue arises and I need to know how solve this issue with rollup itself not configuring target project. Please accept my excuse in advance for posting a lot of code but all was config files don't know how make a playground for this.