Function MCQQuestion

apps/web/components/mcq/MCQQuestion.tsx:6–95

({
  question,
  setAtempted,
  isReset,
  isSubmitted,
  setisSubmitted,
}: {
  question: Question;
  setAtempted: Dispatch<SetStateAction<Object>>;
  isReset: boolean;
  isSubmitted: boolean;
  setisSubmitted: Dispatch<SetStateAction<boolean>>;
})

import { MCQQuestion as Question } from "@prisma/client";

const MCQQuestion = ({
  question,
  setAtempted,
  isReset,
  isSubmitted,
  setisSubmitted,
}: {
  question: Question;
  setAtempted: Dispatch<SetStateAction<Object>>;
  isReset: boolean;
  isSubmitted: boolean;
  setisSubmitted: Dispatch<SetStateAction<boolean>>;
}) => {
  const [selectedOption, setSelectedOption] = useState<string | null>(null);
  const [isCorrect, setIsCorrect] = useState<boolean | null>(null);

  const handleOptionSelect = (option: string) => {
    if (isSubmitted) {
      return;
    }
    if (selectedOption === option) {
      setAtempted((prev) => ({ ...prev, [question.id]: false }));
      setSelectedOption(null);
      return;
    }
    setSelectedOption(option);
    setAtempted((prev) => ({ ...prev, [question.id]: option == question.correctOption }));
    setIsCorrect(null);
  };

  useEffect(() => {
    if (isSubmitted) {
      handleOnSubmit();
    }
  }, [isSubmitted]);

  const handleOnSubmit = () => {
    setisSubmitted(true);
    if (selectedOption === question.correctOption) {
    } else {
      setIsCorrect(false);
    }
  };

  useEffect(() => {
    setSelectedOption(null);
    setIsCorrect(null);
    setisSubmitted(false);
  }, [isReset]);

  return (
    <div>
      <Card className="my-4">
        <CardHeader>
          <CardTitle>{question.question}</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col">
          {question.options.map((option, index) => (