Button not getting disabled after popup closes in React

I’m trying to implement a functionality wherein after I click a button, a popup should open with some content, and once it is closed, the button should be permanently disabled.

Now, I’ve implemented the same functionality for another button which works fine in the same component using: –

    const fiftyClickHandler = (event) => {
        event.currentTarget.disabled = true;
        setIsFiftyActive(true);
    }

but it just doesn’t work for the other button (ask-the-expert)

import React from 'react'
import OpenAI from "openai";
import Popup from "./Popup";
export default function Helpline({ data, questionNumber, setIsFiftyActive }) {
    //* Open source API key
    const openai = new OpenAI({
        apiKey: process.env.REACT_APP_API_KEY,
        baseURL: process.env.REACT_APP_BASE_URL,
        dangerouslyAllowBrowser: true
    });
    const [PopupModalOpen, setPopupModalOpen] = React.useState(false)
    const [gptData, setGptData] = React.useState([]);
  
    const expertClickHandler = async (event) => {
        //* Constructing object that would have all answer options and questions to be sent to GPT
        let ansOptions = "";
        data[questionNumber - 1].answers.map((item) => {
            return ansOptions += item.text + ",";
        })
        let contentObj = {
            ansOptions,
            question: data[questionNumber - 1].question
        }
        try {
            const completion = await openai.chat.completions.create({
                model: "pai-001",
                messages: [
                    { role: "system", content: "You are an expert in trivia and general knowledge and are an assistant in a quiz show helping users when they are in need" },
                    {
                        role: "user",
                        content: contentObj,
                    },
                ],
            });
            setGptData(completion.choices[0].message.content);
            console.log(gptData);
        } catch (error) {
            setGptData("Null");
            console.log("Error fetching results")
        }
        setPopupModalOpen(true);
        event.currentTarget.disabled = true;
    }

    const fiftyClickHandler = (event) => {
        event.currentTarget.disabled = true;
        setIsFiftyActive(true);
    }
    return (
        PopupModalOpen ?
            <div>
                <Popup PopupModalOpen={PopupModalOpen} setPopupModalOpen={setPopupModalOpen} />
            </div> :
            //* Expert answer state === false meaning modal is not open */
            <div className="helpline">
                <button className="game-btn" id="fifty-fifty" onClick={fiftyClickHandler}>
                    Fifty Fifty
                </button>
                <button className="game-btn" id="ask-the-expert" onClick={expertClickHandler}>
                    Ask the expert
                </button>
            </div>

    )
}

Why is this happening?

There are two ways to solve this ->

1. Refs: – I’ve tried using it, but it doesn’t work because after closing the modal, the ref’s value is set to null again and the button doesn’t; get disabled.

2. State: – An obvious solution, but I want to use them when there is no other solution available.