this is the JSON file that is coming from the server

 {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

//this is the code I did in react

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;

//can any tell me how can I stop the error?

I am stuck here I need help here

I am stuck here I need help here