I am fetching data from database and rendering it through a client component (because it will be added useState) but it’s getting error only when passing prop. i have no Idea what’s going on.

import { Exam } from '@/db/models/exam';
import { ExamPaper } from './client-exam-paper';

const ExamPage = async ({ params }) => {
  const exam = await Exam.findById(params.examId);

  // client component 
  return <ExamPaper exam={exam} />; // error
  return <ExamPaper />; // okay
};

export default ExamPage;

./client-exam-paper page is

'use client';

export function ExamPaper() {
  return <div>asdfghjk</div>;
}

Error is

Error: Maximum call stack exceeded