Fix explanation modal overlap

src/components/Quiz/QuizQuestionContent.tsx

-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
 import './quizQuestion.scss'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
@@ -34,7 +34,6 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
   const [questionIndex, setQuestionIndex] = useState<number>(
     questionIndexLocked
   )
-  const [enableNextQuest, setEnableNextQuest] = useState<boolean>(false)
 
   const client: Client = useClient()
   const dispatch = useDispatch()
@@ -67,23 +66,24 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUserChoice(e.target.value)
   }
-
-  const goNextQuestion = async () => {
-    setEnableNextQuest(true)
+  const goNextQuestion = useCallback(() => {
+    setUserChoice('')
     setOpenModal(false)
     if (questionIndex === userChallenge.quiz.questions.length - 1) {
       setIsCustomQuest(true)
     }
-  }
-  useEffect(() => {
-    if (enableNextQuest) {
-      if (questionIndex !== userChallenge.quiz.questions.length - 1) {
-        setQuestionIndex(questionIndex + 1)
-      }
-      setEnableNextQuest(false)
-      setUserChoice('')
+    if (questionIndex !== userChallenge.quiz.questions.length - 1) {
+      setQuestionIndex(questionIndex + 1)
     }
-  }, [enableNextQuest, questionIndex, userChallenge, userChoice])
+  }, [
+    questionIndex,
+    setIsCustomQuest,
+    setQuestionIndex,
+    setUserChoice,
+    setOpenModal,
+    userChallenge.quiz.questions.length,
+  ])
+
   return (
     <div className="quiz-container">
       <div className="question-container">
@@ -127,13 +127,15 @@ const QuizQuestionContent: React.FC<QuizQuestionContent> = ({
           {t('quiz.button_validate')}
         </Button>
       )}
-      <QuizExplanationModal
-        open={openModal}
-        answerIndex={answerIndex}
-        question={userChallenge.quiz.questions[questionIndex]}
-        goNext={goNextQuestion}
-        handleCloseClick={() => setOpenModal(false)}
-      />
+      {openModal && (
+        <QuizExplanationModal
+          open={openModal}
+          answerIndex={answerIndex}
+          question={userChallenge.quiz.questions[questionIndex]}
+          goNext={goNextQuestion}
+          handleCloseClick={() => setOpenModal(false)}
+        />
+      )}
     </div>
   )
 }