React onClick event working on twice clicks when clicking again

I am using react with typescript. I created one button and now I want to change it to invert its text on onClick event for that I am using useState to change the text of the button, for text inversion, I create one boolean flag.

If I click the button first it works perfectly and when I click again it. It won’t work on first click.

const Panel = () => {
    let flag: boolean = false;
    const [btnText, setBtnText] = useState("hello!");

    const changeBtnText = () => {
        if(!playButtonFlag){
            setBtnText("How are you!");
            flag = true;
        }
        else{
            setBtnText("hello!");
            flag = false;
        }
    }
  return <div>
      <Button name={btnText} onClick={changeBtnText}/>
  </div>;
};