Trying to get Modal displaying different information dependant upon which button is clicked in NextJS

Question

I'm trying to build a quiz app in NextJS. I'm currently using a const to populate 4 button choices which are modals that display a pop up to inform if the correct choice is made. I have the buttons displaying a choice correctly but the modal displays the same information for every button. Weirdly, it displays the information of the 4th option.

"use client";

import { Button, Card } from "flowbite-react";
import Link from "next/link";
import { Modal } from "flowbite-react";
import { useState } from "react";

const options = [
  {
    answer: "Goldfish",
    result: "Incorrect",
    explanation:
      "Unfortuantely, Goldfish is incorrect. The correct answer is Elephant!",
  },
  {
    answer: "Elephant",
    result: "Correct!",
    explanation: "Congratulations! Elephant is the correct answer",
  },
  {
    answer: "Jaguar",
    result: "Incorrect",
    explanation:
      "Unfortuantely, Jaguar is incorrect. The correct answer is Elephant!",
  },
  {
     answer: "Zebra",
    result: "Incorrect",
     explanation:
       "Unfortuantely, Zebra is incorrect. The correct answer is Elephant!",
  }, 
 ];

function ModalAnswer() {
   const [openModal, setOpenModal] = useState<string | undefined>();
   const props = { openModal, setOpenModal };

  return (
    <>
       {options.map((option) => (
         <>
          <Button onClick={() => props.setOpenModal("default")}>
             {option.answer}
           </Button>
           <Modal
            show={props.openModal === "default"}
            onClose={() => props.setOpenModal(undefined)}
          >
            <Modal.Header>{option.result}</Modal.Header>
             <Modal.Body>
              <div className="space-y-6">
                <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                  {option.explanation}
                </p>
              </div>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={() => props.setOpenModal(undefined)}>Ok</Button>
            </Modal.Footer>
          </Modal>
        </>
       ))}
    </>
  );
}

export default function CardWithActionButton() {
  return (
    <div className="max-w-md mx-auto rounded-xl overflow-hidden md:max-w-2xl">
      <Card className="max-w-sm">
        <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
          <p>Which is biggest?</p>
        </h5>
        <p className="font-normal text-gray-700 dark:text-gray-400">
          Tell me which animal is the biggest.
        </p>
        <ModalAnswer />
       </Card>
     </div>
   );
}