Uncaught runtime error - Cannot read properties of null (reading 'useState') TypeError: Cannot read properties of null (reading 'useState')

[msc0001]

Env used:

"rollup": "^3.22.0",
"typescript": "5.0.4",
"react": "^18.2.0" // as peer dependency

Whenever I am using a hook inside any component of the created library it throws the error -

ERROR
Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
    at useState (http://localhost:3000/main.969d555df88fb2dbc6ad.hot-update.js:2183:25)
    at Header (http://localhost:3000/main.969d555df88fb2dbc6ad.hot-update.js:185:70)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:21238:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:24524:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:25820:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10830:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10874:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10931:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30805:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:30052:16)

My Code:

import React, { useState } from 'react';
import styles from './header.module.scss';
const Header = () => {
  // const [{ date, time }]= [{ date: '14 May', time: '11:30:03 PM' }];
  const [{ date, time }]= useState<{ date: string, time: string }>({ date: '14 May', time: '11:30:03 PM' });

  return (
    <header className={styles.header}>
       ...
    </header>
  );
}

Integrated env:

import React from 'react';
import { MyComponent } from 'my-lib';

function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}

export default App;

maybe this issue is not with the above repo, please someone help me with the same? Becuase the same error I received when creating the setup using Webpack 5.

More details:

function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;

  {
    if (dispatcher === null) {
      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:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.');
    }
  } // Will result in a null access error if accessed outside render phase. We
  // intentionally don't throw our own error because this is in a hot path.
  // Also helps ensure this is inlined.


  return dispatcher;
}


function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

dispatcher in the above function is returned as null. though same thing is supposed to be managed by react.