React setState is not working properly when it is triggered – Javascript

I have a strange problem with react setState().

Currently, I am using Azure DevOps extensions components, and I have a panel with an onClick event, which should change the state of IsUserAddedOrUpdated and trigger the addOrUpdate function( which is async). And after the changed state, Spinner should be visible.
But when the onClick event is triggered, nothing happens. The IsUserAddedOrUpdated state is unchanged, and the method is triggered.

public render(): JSX.Element {
        return (
            <Panel
                onDismiss={this.props.onClose}
                footerButtonProps={[
                    { text: "Cancel", onClick: this.props.onClose },
                    {
                        text: this.props.user ? "Save" : "Invite new users",
                        primary: true,
                        onClick: () => 
                        {
                            this.setState({ IsUserAddedOrUpdated: true }),
                            this.addOrUpdate();
                        },
                        disabled: this.state.inviteButtonDisabled
                        
                    }
                ]}
            >
                <div className="width-100 flex-column">

                    <ConditionalChildren renderChildren={this.state.IsUserAddedOrUpdated}>
                        <div className="loader">
                            <Spinner
                                label="Loading..."
                                size={SpinnerSize.large}
                            ></Spinner>
                        </div>
                    </ConditionalChildren>

                </div>
            </Panel>
        );
    }

But when I remove the function call from the onClick event, then it works. I also tried to move the setState inside the addOrUpdate function, but with no results.
Any ideas how to fix that?

onClick: () => 
  {
       this.setState({ IsUserAddedOrUpdated: true })
  },