este es el archivo JSON que proviene del servidor

 {workouts: Array(3)} workouts: Array(3) 0: {_id: 'idnumber1', title: 'pullup', reps: 40, load: '20', createdAt: '2022-07-20T18:06:39.642Z', …} 1: {_id: 'idnumber2', title: 'situp', reps: 40, load: '20', createdAt: '2022-07-20T10:10:14.078Z', …} 2: {_id: 'idnumber3', title: 'pushup', reps: 10, load: '0', createdAt: '2022-07-19T14:33:58.678Z', …} length: 3 [[Prototype]]: Array(0) [[Prototype]]: Object

// este es el código que hice en reaccionar

 import { useEffect, useState } from "react"; const Home = () => { const [workouts, setworkouts] = useState(null); useEffect(() => { const fecthworkout = async () => { const response = await fetch("/api/workout"); const json = await response.json(); if (response.ok) { setworkouts(json); } }; fecthworkout(); }, []); useEffect(() => { console.log("hello"); }, []); return ( <div className="home"> <div className="workouts"> {workouts && workouts.map((workouts) => ( <p key={workouts._id}>{workouts.title}</p> ))} </div> </div> ); }; export default Home;

// ¿alguien puede decirme cómo puedo detener el error?

estoy atascado aqui necesito ayuda aqui

estoy atascado aqui necesito ayuda aqui