Quize app in next js with score page

 import { Key, useState } from "react";

import quizData from '../components/computerList'

const Quiz = () => {

  const [currentQuestion, setCurrentQuestion] = useState(0);

  const [score, setScore] = useState(0);

  const [showResult, setShowResult] = useState(false);

  const handleAnswer = (answer: number) => {

    const isCorrect = quizData[currentQuestion].answer === answer;

    if (isCorrect) {

      setScore(score + 1);

    }

    if (currentQuestion + 1 < quizData.length) {

      setCurrentQuestion(currentQuestion + 1);

    } else {

      setShowResult(true);

    }

  };

  const restartQuiz = () => {

    setCurrentQuestion(0);

    setScore(0);

    setShowResult(false);

  };

  return (

    <div>

      {showResult ? (

        <Result score={score} totalQuestions={quizData.length} onRestart={restartQuiz} />

      ) : (

        <Question

          question={quizData[currentQuestion].question}

          options={[

            quizData[currentQuestion].option1,

            quizData[currentQuestion].option2,

            quizData[currentQuestion].option3,

            quizData[currentQuestion].option4,

          ]}

          onAnswer={handleAnswer}

        />

      )}

    </div>

  );

};

const Question = ({ question, options, onAnswer }: any) => {

  return (

    <div>

      <h2>{question}</h2>

      {options.map((option: string, index: Key) => (

        <button key={index} onClick={() => onAnswer(index)}>

          {option}

        </button>

      ))}

    </div>

  );

};

const Result = ({ score, totalQuestions, onRestart }: any) => {

  return (

    <div>

      <h2>Quiz Result</h2>

      <p>Your score: {score}/{totalQuestions}</p>

      <button onClick={onRestart}>Restart Quiz</button>

    </div>

  );

};

export default Quiz;