Functional `ref` prop throws a `Maximum update depth exceeded` error when suspending.

React version: `18.0.0-alpha-464f27572-20210713`

## Steps To Reproduce

1. Click on the `suspend` button: https://codesandbox.io/s/ref-set-too-many-times-jm0c3?file=/src/App.js.

## The current behavior

Clicking on the `suspend` button throws a `Maximum update depth exceeded` error.

## The expected behavior

Clicking on the `suspend` button suspends.
);
        }
      }
      bubbleProperties(workInProgress);
      return null;
    }
    case SuspenseComponent: {
      popSuspenseContext(workInProgress);
      const nextState: null | SuspenseState = workInProgress.memoizedState;
      if (enableSuspenseServerRenderer) {
        if (nextState !== null && nextState.dehydrated !== null) {
          if (current === null) {
            const wasHydrated = popHydrationState(workInProgress);
            invariant(
              wasHydrated,
              'A dehydrated suspense component was completed without a hydrated node. ' +
                'This is probably a bug in React.',
            );
            prepareToHydrateHostSuspenseInstance(workInProgress);
            bubbleProperties(workInProgress);
            if (enableProfilerTimer) {
              if ((workInProgress.mode & ProfileMode) !== NoMode) {
                const isTimedOutSuspense = nextState !== null;
                if (isTimedOutSuspense) {
                  
                  const primaryChildFragment = workInProgress.child;
                  if (primaryChildFragment !== null) {
                    
                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                  }