React Bad Adventure

choose-your-adventure-bad.jsx

function ChooseAdventure({ adventurer, choice }) {
  return (
    <div id="adventure">
      {choice === "find the holy grail" && (
        <div>
          Howdy there {adventurer.name}! Are you ready to find the holy grail?
          <button onClick={() => goToGrailQuest(adventurer)}>Yes</button>{" "}
          <button onClick={changeAdventure}>Change Adventure</button>
        </div>
      )}
      {choice === "save princess peach" && (
        <div>
          Howdy there {adventurer.name}! Are you ready to save Princess Peach?
          <button onClick={() => goToMarioWorldQuest(adventurer)}>
            Yes
          </button>{" "}
          <button onClick={changeAdventure}>Change Adventure</button>
        </div>
      )}
      {choice === "save zelda from ganon" && (
        <div>
          Howdy there {adventurer.name}! Are you ready to save Princess Zelda?
          <button onClick={() => goToLegendOfZeldaQuest(adventurer)}>
            Yes
          </button>{" "}
          <button onClick={changeAdventure}>Change Adventure</button>
        </div>
      )}
    </div>
  );
}