React - Component Lifecycle when pressing "back" from an external URL

Question

Context: I am creating a simple web app where the user can login, select the amount they wish to pay, and then press a Pay button which redirects them to a payment gateway in order for them to pay.

Problem: When they press the Pay button, I set a mobX observable variable to loading so as to show a loading spinner and disable the button. This works fine. However, if the user proceeds to the external payment gateway, and then press the browser Back button, on certain browsers (Firefox and Safari), my state is still loading, despite setting it to not loading on componentDidMount. What component lifecycle method is called when navigating to the component from the back button on all browsers?

code:

@observer
class DuesForm extends React.Component<Props, {}> {
    private form;

    private loadingStore: LoadingStore = new LoadingStore();

    constructor(props: Props) {
        super(props);
        this.form = React.createRef();
    }

    public componentDidMount() {
        this.loadingStore.setLoadingToComplete();
    }

    public componentWillUnmount() {
        this.loadingStore.setLoadingToComplete();
    }

    public render() {
        return (
                <form
                    name="dues-form"
                    ref={(f) => (this.form = f)}
                    method="POST"
                    action="www.external-payment-gateway.com"
                >
                    <div>
                        <h4 style={{ marginBottom: '0.5em' }}>Currency</h4>
                        <Radio.Group
                            options={currencyOptions}
                            optionType="button"
                            buttonStyle="solid"
                        />
                    </div>
                    <div style={{ marginTop: '1em' }}>
                        <h4 style={{ marginBottom: '0.5em' }}>Amount</h4>
                        <InputNumber
                            type="number"
                            style={{ minWidth: '8em', justifyContent: 'center' }}
                            min={0}
                            step={0.01}
                            precision={2}
                        />
                    </div>
                    {this.loadingStore.isLoading ? (
                        <Space size="middle" style={{ marginBottom: '1em', marginTop: '1em' }}>
                            <Spin indicator={<LoadingOutlined />} />
                        </Space>
                    ) : null}
                    <div style={{ marginTop: '1.5em' }}>
                        <Button
                            className="primary-button"
                            style={{ width: '100%' }}
                            type="primary"
                            onClick={this.handleButtonClick.bind(this)}
                            disabled={this.loadingStore.isLoading}
                        >
                            Pay
                        </Button>
                    </div>
                    <PaymentForm /> // This is a hidden form given to me by the payment gateway to send the data
                </form>
        );
    }

    private handleSubmit(e: any): void {
        e.preventDefault();
        this.loadingStore.setLoadingToLoading();
        this.form.submit(); // the reason I am doing it this way is I have to fetch some data from the API before submitting
    }
}