TypeError: Cannot read properties of undefined (reading 'subscribe')

export default function Page({ params }: { params: { subject: string } }) {
  const router = useRouter();
  const pathname = usePathname()
  const segments = pathname.split('/');
  const subject = segments[2];
  const topic = segments[3];

  const { data: topics, isLoading: topicsLoading } = useQuery(
    ['topics'],
    async () => {
      const response = await fetch('/api/topiclist');
      const data = await response.json();
      console.log(data); // Log the response data
      return data.map((topic: { name: string }) => topic.name.toLowerCase());
    }
  );

  const { data: subjects, isLoading: subjectsLoading } = useQuery(
    ['subjects'],
    async () => {
      const response = await fetch('/api/subjectlist');
      const data = await response.json();
      console.log(data); // Log the response data
      return data.map((subject: { name: string }) => subject.name.toLowerCase());
    }
  );

  if (subjects && !subjects.includes(subject)) {
    return <p>Exam not found</p>;
  }

  const capitalizedSubject =
    params.subject.charAt(0).toUpperCase() + params.subject.slice(1);

  return (
    <div>
      <h1>{capitalizedSubject} Page</h1>

      <h2>Topics for ID: </h2>
      <ul>
        {topicsLoading ? (
          <div>Loading topics...</div>
        ) : topics && topics.length > 0 ? (
          topics.map((topic: string, index: number) => (
            <CommandItem key={index}>
              <Calendar className="mr-2 h-4 w-4" />
              <Link href={`/exams/${topic}`}>{topic}</Link>
            </CommandItem>
          ))
        ) : (
          <div>No topics available.</div>
        )}
      </ul>
    </div>
  );
}