I am trying to define window.Telegram.WebApp.MainButton.onClick() functionality to use the most recent values.

Lets see through code:

// selectedRegions is an array of strings
const [selectedRegions, setSelectedRegions] = React.useState([""]);

React.useEffect(() => {
    window.Telegram?.WebApp.MainButton.onClick(() => {
        //   window.Telegram.WebApp.sendData(selectedRegions);
        alert("main button clicked");
    });
}, [selectedRegions]);

Now as i update the selectedRegions, this useEffect is called for the number of times the state changes which also updates the MainButton.onClick() functionality. Then at the end, when the MainButton is pressed, in this case, alert() is shown the number of times the state was updated, eg, if the selectedRegions contain 3 values, the alert will be shown 3 times.

What I want is to somehow define this onClick() once or the functionality executed only once, so that i can send the selectedRegions only once with the most recent values back to the bot.

Any help would be appreciated.