Closed `alert` in one tab re-opens when user navigates to second tab in react native app

Question

In my react-native app I have a screen that imports three different tab views. One issue I'm running into is, on one of the tabs - the SessionsTab tab - I have an alert that pops up if a certain user action is made.

Now, the problem is, if the user closes that alert in the SessionsTab tab, and then navigates to the DetailsTab tab, the alert re-opens/re-appears, and one has to click on it again to clear it. How can I prevent this from happening?

NOTE: I am using react-native-tab-view for the tabs.

This is the code I use in the screen to render the tabs:

  render() {
    return (
      <SafeAreaView style={styles.layout.safeAreaView}>
        <View style={styles.layout.flexColumn}>
          <View style={styles.subHeader.container}>
            <View style={styles.subHeader.subContainer}>
              <Text style={styles.subHeader.service}>{convertService(this.props.client?.service)}</Text>
              <TextInput
                style={styles.subHeader.heroText}
                placeholder="Tap here to share something about this client."
                placeholderTextColor={styles.colors.textPlaceholder}
                maxLength={50}
                onChangeText={(text) => this.props.updateHeroNote(this.props.client?.id, text)}
                value={this.props.client?.heroNote ? this.props.client?.heroNote?.value || '' : ''}
              />
              <View style={styles.subHeader.details}>
                <View style={styles.layout.flexRow}>
                  <FontAwesome name='language' size={15} color={styles.colors.textInverse} style={{ marginRight: 10 }} />
                  <Text style={{
                    color: styles.colors.textInverse,
                    fontSize: 15,
                  }}>{this.props.client?.primaryLanguage}</Text>
                </View>
                <View style={styles.layout.flexRowJustifyEnd}>
                  <FontAwesome name='birthday-cake' size={15} color={styles.colors.textInverse} style={{ marginRight: 10 }} />
                  <Text style={{
                    color: styles.colors.textInverse,
                    fontSize: 15,
                  }}>{moment(this.props.client?.dateOfBirth).format('MMM Do YYYY')}</Text>
                </View>
              </View>
            </View>
          </View>
          <View
            style={{
              height: 5,
              backgroundColor: styles.colors.primary,
            }}
          />
          <TabView
            swipeEnabled={false}
            navigationState={this.state}
            renderScene={SceneMap({
              sessions: () => SessionsTab(this.props),
              details: () => DetailsTab(this.props),
              goals: () => GoalsTab(this.props),
            })}
            onIndexChange={index => this.setState({ index })}
            renderTabBar={this.renderTabBar}
            tabBarPosition='bottom'
            initialLayout={{ flex: 1 }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

An example alert looks like this:

Alert.alert(
  'Out of Sessions',
  'There are no sessions available for this client.',
  [
    {
      text: 'Cancel',
      onPress: () => { },
      style: 'cancel',
    },
    {
      text: 'Create Session',
      onPress: async () => {
        await createSession(option.customKey, props);
      },
    },
  ],
  {cancelable: false},
);

return;