in some instances the funfact emoji button doesnt animate out when its been clicked on

[tangway]

it has inconsistent behaviour even within the same round of questions

[tangway]

fixed this when i read the docs for enabling exit animation more thoroughly at https://www.framer.com/motion/animate-presence/

it is important to wrap motion elements with AnimatePresence and add mode="wait" prop so that the entering animation will wait for the exiting animation to finish.
adding these parameters to all the motion elements that needs exit animation solved most entry/exit animation issues
this also solved issue #48

<AnimatePresence mode="wait">
            {showEndModal === false ? (
              <motion.button
                key={`next-button-${showEndModal}`}
                type="button"
                className="next-button"
                onClick={nextButtonFunc}
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 1.2, ease: 'easeInOut' }}
                exit={{ scale: 0, transition: { duration: 0.8, ease: 'easeInOut' } }}
              >
                {currentQuestionNumber === questions.length - 1
                  ? 'GAME OVER'
                  : 'Next'}
              </motion.button>
            ) : gameHasEnded === true ? (
              <motion.button
                key={`emoji-button-${showEndModal}`}
                className="emoji-button"
                type="button"
                onClick={showEndModalFunc}
                initial={{ scale: 0 }}
                animate={controls}
                exit={{ scale: 0, transition: { duration: 0.8, ease: 'easeInOut' } }}
              >
                🎁
              </motion.button>
            ) : null}
</AnimatePresence>