TypeError: React__namespace.useSyncExternalStore is not a function NextJs is throwing this error when being used with Chakra-UI

I am using NextJs with Chakra Provider and I keep running into this error. I have no clue where this error is coming from but here is the error information.

Updating to react 17 or 18 does not fix this issue.

Server Error
TypeError: React__namespace.useId is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/_document.js (8:31) @ Function.getInitialProps

   6 | class MyDocument extends Document {
   7 |   static async getInitialProps(ctx) {
>  8 |     const initialProps = await Document.getInitialProps(ctx);
     |                               ^
   9 |     return { ...initialProps };
  10 |   }
  11 |