react 18.3.0 の `use` による再レンダリングが複数回発生してしまう


react 18.3.0 の `use`
を使ったfetchとSuspenseを行いたいのですが、複数回（ときには無制限）の再レンダリングが発生してしまっています。  
解決方法を教えてください。

  * react: 18.3.0-canary-3ff846d10-20230724
  * next: 13.4.12

以下のコードでトップページを開くと画面に`Done`が表示されるまでの間、`render
SuspenseTest`が複数回（5~8回ほど）コンソールに出力されます。  
1度だけレンダリングされるようにしたいです。

よろしくお願いします。

[code]

    // src/pages/index.tsx
    
    import { Suspense } from "react"
    
    import Head from "next/head"
    
    import SuspenseTest from "@/components/modules/SuspenseTest"
    import Layout from "@/layout/Default"
    
    import styles from "./index.module.scss"
    
    const Top = (): JSX.Element => {
      return (
        <>
          <Head>
            <title>Suspense Test</title>
          </Head>
          <Layout>
            <main className={styles.Top}>
              <Suspense fallback={<div>Now Loading...</div>}>
                <SuspenseTest />
              </Suspense>
            </main>
          </Layout>
        </>
      )
    }
    
    export default Top
    
[/code]

[code]

    // src/components/modules/SuspenseTest/index.tsx
    
    import { use } from "react"
    
    const fetcher = (): Promise<string> => {
      return new Promise((resolve) => setTimeout(resolve, 5000))
    
      // 実際に行いたいのは以下のような処理
      // return axiosClient
      //   .get("/articles")
      //   .then((response) => {
      //     return response.data as Promise<Article[]>
      //   })
      //   .catch((error) => console.error(error))
    }
    
    const SuspenseTest = (): JSX.Element => {
      console.log("render SuspenseTest")
    
      use<string>(fetcher())
    
      return <div>Done</div>
    }
    
    export default SuspenseTest
    
[/code]




回答ではないのですが、

まず状況を再現するのもできない...  
Done にならない。

<https://codesandbox.io/s/competent-fog-2j757d?file=/src/suspensetest.js>

codesandbox の react: 18.3.0 はいろいろ選べるのだけど、まだ開発中っぽいから無理なのかな。

