Trying to build a simple portfolio website for myself, and I keep seeing this error in the console

Warning: Cannot update a component (`HotReload`) while rendering a different component (`ProjectCards`). To locate the bad setState() call inside `ProjectCards`, follow the stack trace as described in

I have my home page under home/page.tsx and a simple Cards component under components/ui/project_cards.tsx. Project_cards simply fetches data from a json file using UseState to show an array of cards and I am calling it in my home page as

<Cards>
  <Project_cards/>
</Cards>

Project Cards -

function ProjectCards() {
  const [projects, setProjects] = useState<project_data | any>({});
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("/project_content.json", {
          method: "GET",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
        });
        const data = await response.json();
        console.log(data);
        setProjects(data);
      } catch (error) {
        console.error("Error fetching project data:", error);
      }
    };
    fetchData();
  }, [setProjects]);
  console.log(projects);
  console.log(typeof projects);
return (
    <Stack spacing={4} direction={["column", "row"]} wrap="wrap">
      {projects.map((project: project_data) => (
        <Card key={project.id} className="rounded-lg border-4">
          <Image
            src="https://bit.ly/2k1H1t6"
            alt="Project Image"
            objectFit="cover"
            height="200px"
          />
          <CardHeader>
            <Heading className="text-2xl text-white">{project.name}</Heading>
          </CardHeader>
          <CardBody>
            <Text>{project.overview}</Text>
          </CardBody>
          <CardFooter>
            <Button
              colorScheme="blue"
              mr={2}
              onClick={() => window.open(project.demo)}
            >
              Demo
            </Button>
            <Button
              colorScheme="green"
              onClick={() => window.open(project.github)}
            >
              Github
            </Button>
          </CardFooter>
        </Card>
      ))}
    </Stack>
  );
}

export default ProjectCards;

I just dont understand this error and whats causing this, any info is appreaciated.