Estoy tratando de cargar de forma diferida una lista de datos con suspenso e importación dinámica en Nextjs. Pero obteniendo el siguiente error:

 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.

Intenté usar startTransition() pero no pude entender cómo usarlo.

Lista de datos.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;