我正在实现我自己的模态，试图用更漂亮的东西来代替Alert.alert.我让它在需要的时候显示出来，但它并没有隐藏在按钮按下，而是我想我转移了它所需要的功能.我的模态结构如下：

export const RCModal = ({ title, visible, onButtonPress }) => {
  return (
    <Modal
      animationType='fade'
      transparent={true}
      visible={visible}
    >
      <View style={styles.container}>
        <Text style={styles.title}>{title}</Text>
        <Pressable style={styles.button} onPress={onButtonPress}>
          <Text style={styles.text}>OK</Text>
        </Pressable>
      </View>
    </Modal>
  )
};

并且它在应用程序中以如下方式使用：

// ...
  const [alertVisible, setAlertVisible] = useState(false);
  const [alertTitle, setAlertTitle] = useState();
  const [alertOnPress, setAlertOnPress] = useState();
// ...
  const winner = (theWinner) => {
    setBlocked(true);
    setAlertTitle(`${theWinner} win!`);
    setAlertOnPress(() => setAlertVisible(!alertVisible));
    setAlertVisible(true);
  }
// ...
  return (
    <View style={styles.container}>
      <RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
        <Text style={styles.title}>Noughts and Crosses</Text>
        <Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
        <View style={styles.buttonsContainer}>
          <Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
          <TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
            <Text style={styles.buttonText}>New game</Text>
          </TouchableHighlight>
        </View>
        <Field state={fieldState} size={fieldSize} onCellPress={onCellPress} />
      </ScrollView>
      <View style={styles.settingsButtonContainer}>
        <TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
          <Image source={require('../img/settings.png')} style={styles.settingsIcon} />
        </TouchableHighlight>
      </View>
    </View>
  );
};

当winner()被调用时，它被显示为它应该的样子，但是当我按下确定按钮时，它没有隐藏。我如何修复它？