React version: 18.2.0
Next version: 13.1.1

## Steps To Reproduce

1. Suspend using a (fake) promise in a client component in app dir (next)
2. Try to useState after the use() call

````ts
'use client';

import { use, useState } from 'react';

const testPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('use test promise');
  });
});

export default function Page() {
  use(testPromise);
  useState(0);

  return <h1>Test</h1>;
}

````

Link to code example:
https://codesandbox.io/s/github/xiel/app-playground/tree/suspense-error/?from-embed=&file=/app/page.tsx

## The current behavior

Suspending for a promise in a client component and using state/reducer after results in errors during hydration:

```
react-dom.development.js?9d87:94 Warning: An error occurred during hydration. The server HTML was replaced with client 

react-dom.development.js?9d87:94 Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError. 

on-recoverable-error.js?eb92:17 Uncaught Error: Should have a queue. This is likely a bug in React. Please file an issue.
```

## The expected behavior

No error during hydration.

useRefHelper,
      useStateHelper,
    ];
    if (__EXPERIMENTAL__) {
      const useTransitionHelper = () => React.useTransition();
      const useDeferredValueHelper = () =>
        React.useDeferredValue(0, {timeoutMs: 1000});
      orderedHooks.push(useTransitionHelper);
      orderedHooks.push(useDeferredValueHelper);
      hooksInList.push(useTransitionHelper);
      hooksInList.push(useDeferredValueHelper);
    }
    const formatHookNamesToMatchErrorMessage = (hookNameA, hookNameB) => {
      return `use${hookNameA}${' '.repeat(24 - hookNameA.length)}${
        hookNameB ? `use${hookNameB}` : undefined
      }`;
    };
    orderedHooks.forEach((firstHelper, index) => {
      const secondHelper =
        index > 0
          ? orderedHooks[index - 1]
          : orderedHooks[orderedHooks.length - 1];
      const hookNameA = firstHelper.name
        .replace('use', '')
        .replace('Helper', '');
      const hookNameB = secondHelper.name
        .replace('use', '')
        .replace('Helper', '');
      it(`warns on using differently ordered hooks (${hookNameA}, ${hookNameB}) on subsequent renders`, () => {
        function App(props) {