Reactjs 为什么我会收到此错误：无法在我的react 包上读取 null 的属性(读取useState)

我正在为一个信用卡表单创建一个Reaction组件库，CreditCardForm.tsx如下所示:

加入时间:清华2007年01月25日下午3:33

import React, {useState} from "react";

interface CreditCardFormProps {
  testState: any;
  name: string;
  onChangeName: () => void;
  cardNumber: string;
  onChangeCardNumber: () => void;
  expirationDate: string;
  onChangeExpirationDate: () => void;
  cvv: string;
  onChangeCvv: () => void;
  onSubmit: () => void;
}


const CreditCardForm = (props: CreditCardFormProps) => {
  const [testState, setTestState] =useState<any>("hello")
  return (
    <form onSubmit={props.onSubmit}>
      <label htmlFor="name">Name on Card</label>
      <input
        type="text"
        id="name"
        name="name"
        value={props.name}
        onChange={props.onChangeName}
        required
        pattern="^[A-Za-z\s]*$"
        title="Please input your name correctly"
      />
      <p>test: {testState}</p>

      <label htmlFor="cardNumber">Card Number</label>
      <input
        type="text"
        id="cardNumber"
        name="cardNumber"
        value={props.cardNumber}
        onChange={props.onChangeCardNumber}
        required
        minLength={16}
        maxLength={16}
        pattern="^[0-9]*$"
        title="Your Card Number should contain only numbers."
      />
        <label htmlFor="expirationDate">Expiration Date</label>
        <input
          type="number"
          id="expirationDate"
          name="expirationDate"
          value={props.expirationDate}
          onChange={props.onChangeExpirationDate}
          required
          title="Please input your Expiration Date correctly"

        />

      <label htmlFor="cvv">CVV</label>
      <input
        type="text"
        id="cvv"
        name="cvv"
        value={props.cvv}
        onChange={props.onChangeCvv}
        required
        minLength={3}
        maxLength={3}
        title="Your CVV should contain only numbers."

      />

      <button type="submit">Submit</button>
    </form>
  );
};

export default CreditCardForm;

Package.json

{
  "name": "@packagename",
  "version": "0.1.24",
  "description": "A react component library",
  "scripts": {
    "rollup": "rollup -c"
  },
  "author": " Name ",
  "license": "ISC",
  "peerDependencies": {
    "react-dom": "^18.2.0",
    "react": "^18.0.2"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.1.0",
    "@rollup/plugin-node-resolve": "^15.0.2",
    "@rollup/plugin-typescript": "^11.1.0",
    "@types/react": "^18.2.0",
    "rollup": "^3.21.0",
    "rollup-plugin-dts": "^5.3.0",
    "source-map-explorer": "^2.5.3",
    "tslib": "^2.5.0",
    "typescript": "^5.0.4"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@username"
  },
  "dependencies": {
    "react": "^18.0.2",
    "react-dom": "^18.2.0"

  }
}

我使用ROLLUP来构建我的包，我的ROLUP.config.mjs文件如下所示:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import packageJson from "./Package.json" assert { type: "json" }; //we import Package.json so when we use commonjs modules

export default [
  //first configuration object
  {
    input: "src/index.ts", //entry point for this part of our library (it exports all of our components so that the user can import the library)
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      }, //commonjs modules, which will use the main field of packageJson module
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      }, //for the es6 modules
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
    ], //node resolve plugin, and the other plugins (typescript plugin needs the specific directory)
  },

  //second configuration object
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

因此，当我发布此Reaction库(NPM PUBLISH)，并将其安装在Reaction应用程序项目(以测试它)上，然后运行该项目(NPM Start)时，它会返回以下错误:

Compiled with problems:
×
ERROR
Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (http://localhost:3000/static/js/bundle.js:2135:29)
    at CreditCardForm (http://localhost:3000/static/js/bundle.js:3112:50)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:24102:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:27388:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:28684:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:13694:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13738:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:13795:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:33669:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:32916:16)

为什么会显示这一点，我如何修复它？