Home Page

"use client";
import { useState, useEffect } from "react";
import Loading from "./loading";
import Link from "next/link";
import Courses from "./components/courses";

export default function HomePage() {
  const { course, setCourse } = useState([]);
  const { loading, setLoading } = useState(true);

  useEffect(() => {
    async function fetchCourses() {
      const res = await fetch("/api/courses");
      const data = await res.json();
      setCourse(data);
      setLoading(false);
    }
    fetchCourses();
  }, []);

  if (loading) {
    return <Loading />;
  }

  return (
    <div>
      <h1>Welcome to next website</h1>
      <Courses courses={course} />
    </div>
  );
}

Component

import Link from "next/link";

export default function Courses({ courses }) {
  return (
    <div className="courses">
      {courses?.map((course) => (
        <div key={course.id} className="card">
          <h2>{course.title}</h2>
          <small>Level: {course.level}</small>
          <p>{course.description}</p>
          <Link href={course.link} target="_blank" className="btn">
            Go to course
          </Link>
        </div>
      ))}
    </div>
  );
}

Just want to fetch the data from local api using “useState and useEffect” at client side page in nextjs but getting an error (setState is not a fuctions), please let me know what i’m doing wrong here.I’m new to React and Nextjs