React Bootstrap Quiz with text-type input

I am new to java script, react and bootstrap. I am trying to design a quiz where the input should be in text format, and that user answer should be visible to the player when they press "previous" or "next" button.

Examples I have seen so far only have MCQs (radio-button). Below is a code which I am trying to emulate. It is in the form of radio-buttons. Can anyone help me change this into quiz with text-input?

const TestScreen = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [selectedOptions, setSelectedOptions] = useState([]);
  const [score, setScore] = useState(0);
  const [showScore, setShowScore] = useState(false);

  const handleAnswerOption = (answer) => {
    setSelectedOptions([
      (selectedOptions[currentQuestion] = { answerByUser: answer })
    ]);
    setSelectedOptions([...selectedOptions]);
    console.log(selectedOptions);
  };

  const handlePrevious = () => {
    const prevQues = currentQuestion - 1;
    prevQues >= 0 && setCurrentQuestion(prevQues);
  };

  const handleNext = () => {
    const nextQues = currentQuestion + 1;
    nextQues < questions.length && setCurrentQuestion(nextQues);
  };

  const handleSubmitButton = () => {
    let newScore = 0;
    for (let i = 0; i < questions.length; i++) {
      questions[i].answerOptions.map(
        (answer) =>
          answer.isCorrect &&
          answer.answer === selectedOptions[i]?.answerByUser &&
          (newScore += 1)
      );
    }
    setScore(newScore);
    setShowScore(true);
  };

  return (
    <div className="minheight-grad">
      <Container>
        {showScore ? (
          <h1 className="text-3xl font-semibold text-center text-#08084e">
            You scored {score} out of {questions.length}
          </h1>
        ) : (
          <>
            <Card
              style={{
                width: "50%",
                height: "75%",
                textAlign: "justify",
                padding: "1rem",
                marginBottom: "1rem",
                align: "center"
              }}
            >
              <div className="flex justify-content-center align-items-center">
                <h4 className="text-xl text-black/60">
                  Question {currentQuestion + 1} of {questions.length}
                </h4>
                <div className="text-2xl text-black">
                  {questions[currentQuestion].question}
                </div>
              </div>
              <div className="flex flex-col w-full">
                {questions[currentQuestion].answerOptions.map(
                  (answer, index) => (
                    <div
                      key={index}
                      className="flex items-center w-full"
                      onClick={(e) => handleAnswerOption(answer.answer)}
                    >
                      <input
                        type="radio"
                        name={answer.answer}
                        value={answer.answer}
                        checked={
                          answer.answer ===
                          selectedOptions[currentQuestion]?.answerByUser
                        }
                        onChange={(e) => handleAnswerOption(answer.answer)}
                        className="w-6 h-6 bg-black"
                      />
                      <p className="ml-6 text-black">{answer.answer}</p>
                    </div>
                  )
                )}
              </div>
            </Card>
            <div className="flex justify-between w-full mt-4 text-black">
              <button
                onClick={handlePrevious}
                className="w-[49%] py-3 bg-indigo-600 rounded-lg"
              >
                Previous
              </button>
              <button
                onClick={
                  currentQuestion + 1 === questions.length
                    ? handleSubmitButton
                    : handleNext
                }
                className="w-[49%] py-3 bg-indigo-600 rounded-lg"
              >
                {currentQuestion + 1 === questions.length ? "Submit" : "Next"}
              </button>
            </div>
          </>
        )}
      </Container>
    </div>
  );
};

export default TestScreen;

[
  {
    "question": "What type of framework is Next.js?",
    "answerOptions": [
      { "answer": "Frontend" },
      { "answer": "Backend" },
      { "answer": "FullStack", "isCorrect": true },
      { "answer": "None of the above" }
    ]
  },
  {
    "question": "When was Next.js released?",
    "answerOptions": [
      { "answer": "20 September 2019" },
      { "answer": "14 January 2017" },
      { "answer": "25 October 2016", "isCorrect": true },
      { "answer": "28 March 2018" }
    ]
  },
  {
    "question": "Which CSS Framework are we using?",
    "answerOptions": [
      { "answer": "Bootstrap" },
      { "answer": "TailwindCSS", "isCorrect": true },
      { "answer": "Chakra UI" },
      { "answer": "Bulma CSS" }
    ]
  },
  {
    "question": "Which class in Tailwind is used to set flex direction of column?",
    "answerOptions": [
      { "answer": "col" },
      { "answer": "col-flex" },
      { "answer": "flex-col", "isCorrect": true },
      { "answer": "None of the above" }
    ]
  }
]