Building quiz site with react, I have 4 buttons that's an option of the question answer

I mapped the component which generated 5 questions and obviously 20 buttons. My problem now is that the first 4 buttons on each row always have the same ID when I try to get each button clicked so I can check if the correct answer was selected. I need every button to have a unique ID. I've tried different ID functions but none seem to work, I think the problem is from my logic and not the ID itself.

import React from "react";

export default function Question_page(props) {

    const [triviaApi, setTriviaApi] = React.useState()

    const styles = {
        backgroundColor: props.isHeld ? "#59E391" : "grey"
    }


    return (
        <div className="main-question-container">
            <div className="question">
                <h3>{props.my_items.question}</h3>
            </div>
            <div className="question-button">
                <button onClick={props.holdAnswer}>{props.my_items.incorrect_answers[0]}</button>
                <button onClick={props.holdAnswer}>  {props.my_items.incorrect_answers[1]}</button>
                <button onClick={props.holdAnswer}>{props.my_items.correct_answer}</button>
                <button onClick={props.holdAnswer}>{props.my_items.incorrect_answers[2]}</button>
            </div>

        </div>
    )
}

The App components below

import QuestionPage from "./components/Question_page";
import React from "react";
import {nanoid} from 'nanoid'
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
import JsonData from "./JsonData";

export default function App() {
    const [colorState, setColorState] = React.useState({
        isClicked: true
    })
    const jsonDataElement = JsonData.map(item => {
        return item.results.map((innerItem,index) => {
            const myID = Math.random()
            return (
                <QuestionPage
                    key={myID}
                    my_items={innerItem}
                    isHeld={innerItem.isClicked}
                    holdAnswer={() => holdAnswer(myID)}
                />
            )
        })
    })

    function holdAnswer(ID) {
        
        // here is where I want to check if every bottom has a different ID so I can change the colour and save the variable to check if the answer was right during my "check answer" click. The issue is, that the first button on the row gives me the same ID, I need to get a different ID on every button which contains the answer option so I can run this function
        console.log(ID)

    }

    return (
        <Router>
            <NavBar/>
            <Routes>
                <Route path="/" element={<Start/>}/>
                <Route path="/question" element={
                    <div>
                        {jsonDataElement}
                        <div className="check-answer-container">
                            <button className="check-answer">Check answer</button>
                        </div>
                        <hr/>
                    </div>

                }/>}/>
            </Routes>
        </Router>
    );
}

The JSON data im using

export default [{
"response_code": 0,
"results": [
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": "Which of these is the name for the failed key escrow device introduced by the National Security Agency in 1993?",
        "correct_answer": "Clipper Chip",
        "incorrect_answers": [
            "Enigma Machine",
            "Skipjack",
            "Nautilus"
        ]
    },
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": "In the server hosting industry IaaS stands for...",
        "correct_answer": "Infrastructure as a Service",
        "incorrect_answers": [
            "Internet as a Service",
            "Internet and a Server",
            "Infrastructure as a Server"
        ]
    },
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": ".rs is the top-level domain for what country?",
        "correct_answer": "Serbia",
        "incorrect_answers": [
            "Romania",
            "Russia",
            "Rwanda"
        ]
    },
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": "What was the first Android version specifically optimized for tablets?",
        "correct_answer": "Honeycomb",
        "incorrect_answers": [
            "Eclair",
            "Froyo",
            "Marshmellow"
        ]
    },
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": "The name of technology company HP stands for what?",
        "correct_answer": "Hewlett-Packard",
        "incorrect_answers": [
            "Howard Packmann",
            "Husker-Pollosk",
            "Hellman-Pohl"
        ]
    }
]

}]