Runtime Error

[sonic patio]

I don't really understand the error since I always use useRef ill share some code

export default function Header() {

    const [isProjectOpen, setProjectOpen] = useState(false);
    const toggleProjectMenu = () => {
        setProjectOpen(!isProjectOpen);
    };

    const [isContributerOpen, setContributerOpen] = useState(false);
    const toggleContributerMenu = () => {
        setContributerOpen(!isContributerOpen);
    };

    const [isFilterOpen, setFilterOpen] = useState(false);
    const toggleFilterMenu = () => {
        setFilterOpen(!isFilterOpen);
    };

    const [isDateOpen, setDateOpen] = useState(false);
    const toggleDateMenu = () => {
        setDateOpen(!isDateOpen);
    };

    useEffect(() => {
        document.addEventListener("click", handleClickOutside, true);
        return () => {
        document.removeEventListener("click", handleClickOutside, true);
        };
    }, []);

    const projectRef = useRef(null);
    const contributorRef = useRef(null);
    const filterRef = useRef(null);
    const dateRef = useRef(null);

    const handleClickOutside = (e) => {
        if (projectRef.current && !projectRef.current.contains(e.target) )  { 
            setProjectOpen(false); 
        }
        if (contributorRef.current && !contributorRef.current.contains(e.target) )  { 
            setContributerOpen(false); 
        }
        if (filterRef.current && !filterRef.current.contains(e.target) )  { 
            setFilterOpen(false); 
        }
        if (dateRef.current && !dateRef.current.contains(e.target) )  { 
            setDateOpen(false); 
        }
    };

import { useEffect, useState } from 'react';
import { useSession } from 'next-auth/react';
import { Octokit } from 'octokit';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {
    faLock,
    faLockOpen,
} from "@fortawesome/free-solid-svg-icons";

async function getRepos(id) {
  const octokit = new Octokit();
  const userResponse = await octokit.request('GET /user/{user_id}', {
    user_id: id,
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
    },
  });

  const username = userResponse.data.login;

  const reposResponse = await octokit.request('GET /users/{username}/repos', {
    username,
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
    },
  });

  return reposResponse.data;
}

export default function ProjectList() {
  const { data: session, status } = useSession();
  const [repos, setRepos] = useState([]);

    useEffect(() => {
        async function fetchRepos() {
        if (session?.user?.id) {
            const userRepos = await getRepos(session.user.id);
            setRepos(userRepos);
        }
        }

        fetchRepos();
    }, [session]);

  return (
    <div>
      <ul>
        {repos.map((repo) => (
          <li className='p-3 hover:bg-highlight-bg hover:cursor-pointer' key={repo.id}> {repo.private ? <FontAwesomeIcon icon={faLock} className=" text-[0.85rem] mr-2" />  : <FontAwesomeIcon icon={faLockOpen} className=" text-[0.85rem] mr-2" />} {repo.name}</li>
        ))}
      </ul>
    </div>
  );
}