我试图在Nextjs中延迟加载一个带有暂停和动态导入的数据列表。但得到以下错误：

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

我尝试过使用startTransition（），但不知道如何使用它。
DataList.tsx:

import React, { useState } from "react";

interface Props {
  data: any[];
}

const DataList = ({ data }: Props) => {
  return (
    <div>
      {data &&
        data.map((item) => {
          return (
            <div key={item._id}> 
              {item.title} 
            </div>
          );
        })}
    </div>
  );
};
export default DataList;

DataPage.tsx

import React, { Suspense, useEffect, useState } from "react";
import dynamic from "next/dynamic";
const DataList = dynamic(() => import("./DataList"), {
  suspense: true,
});

interface Props {}

const Projects = ({}: Props) => {

  const [data,setData] = useState<any[]>();

  useEffect( () => { 
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json))
  } , []) 

  return (
    <>
      <Suspense fallback={<p>LOADING</p>}>
        <DataList data={data} />
      </Suspense>
    </>
  );
};

export default DataPage;