How can I determine which data is displayed in a React component using an useState array?

I have a menu of buttons and each button opens the same component containing a title and a textarea. However, the content shown in the title and textarea must change based on the choice in the menu.

The data is taken from an API and put into a useState array. So I want to use this data in the called component. Does anyone know how you can determine, based on the button in the menu, which data is called in the new component?

This is what I have so far:

Menu Component:

import { useState, useEffect } from "react"
import ScenarioContent from "./ScenarioContent";

const ScenarioMenu = (handleScenario, scenarioChoice) => {
    const [scenarioContent, setScenarioContent] = useState(false);
    const [scenarioList, setScenarioList] = useState([]);

    const setContent = () => {
        if (!scenarioContent) {
            setScenarioContent(true);
        }

        console.log(scenarioContent);
    }


    useEffect(() => {
        const getData = async () => {
            const res = await fetch('http://localhost:8080/api/scenario/')
            const data = await res.json();
            setScenarioList(data);
            console.log(scenarioList);
        }
        getData();
    }, []);

    const getButtons = (num) => {
        const newScenarioArr = [];
        for (let i = 1; i <= num; i++) {
            newScenarioArr.push(<button onClick={setContent}>scenario {i}</button>)
        }
        return newScenarioArr;
    }



    return (
        <div className="container-scenarioSelect">
            <div className="btn-group-scenario">
                {
                    getButtons(scenarioList.length)
                }
            </div>
            <div>
                {scenarioContent ? <ScenarioContent /> : ""}
            </div>

        </div >
    )
}

export default ScenarioMenu

And this is the Content component with hardcoded data:

const ScenarioContent = (scenarioTitle, scenarioText) => {
    return (
        <div className="container-scenarioChoice">
            <div>
                <h1>Hamsterwoede!</h1>
                <label className="labels" for="scenario"> Scenario:  </label>
                <textarea className="text-area" type="text" id="scenario" name="scenario" rows="25" cols="80" >Met oplopende Olifantengriepcijfers op de horizon zijn inwoners van Engelse Eiland massaal begonnen met het inslaan van tampons. Deze zouden helpen de Olifantengriep uit de neus te houden en daarmee een infectie te voorkomen. De regering van Engelse Eiland verzoekt haar burgers dringend om te stoppen met hamsteren, en verzekert hen ervan dat de voorraden groot genoeg zijn om iedereen te kunnen bedienen. Over de effectiviteit van het tampongebruik als preventie van de Olifantengriep zijn door experts nog geen uitspraken gedaan. In Digitanzanië beginnen de eerste geluiden al op te gaan om spullen in te slaan. Wat moet de overheid doen?
                </textarea>
            </div>
            <div className="btn-group-scenario">
                <button>Terug</button>
            </div>
            <div>
                <button></button>
            </div>
            <div className="btn-group-scenario">
                <button>Sla op</button>
            </div>



        </div>
    )
}

export default ScenarioContent

This is how it looks right now, so the menu is left and the content is in the middle. the content must therefore be adjusted, but in the same component based on the menu choice