react native : How to catch the user when he exits the screen after he has checked checxbox and also save json in the variable

In my example I present a flatlist of items with a checkbox.My goal is:1 . When the user marked one of the checkbox or more then he tried to exit the screen if backwards or he tried to move to another page on the screen then bounce him the modal as I already do but if the user did not mark one of the checkbox or more allow him to go back Or go to other screens without bouncing modal.Right now what is happening is that even if he has a mark and he has removed a mark from everyone then it still bounces the modal for him.

2. When the user marks one or more of the checkbox and presses the send-sharp button then save in the variable the json of the selection.

export const ActionsScreen = () => {  const route = useRoute<ActionScreenRouteProp>();  const params = route.params;  const { emergencyRole, displayActionList, roleSelected, stateSelected } = params  const [checkboxDisplay, setCheckboxDisplay] = useState<boolean []>([]);  const [isAlertModalVisible, setAlertModalVisiblity] = useState(false);  const [modalMessage, setModalMessage] = useState('Note that the changes were not saved !');  const [isnewArray, setnewArray] = useState();  useFocusEffect(    React.useCallback(() => {      const onBackPress = () => {          if (isnewArray != false ){         setAlertModalVisiblity(true);        return true          }else{             return false          }      };      BackHandler.addEventListener('hardwareBackPress', onBackPress      );      return () =>        BackHandler.removeEventListener('hardwareBackPress', onBackPress        );    }, [])  );  React.useEffect(() => {    const falseArray = Array(displayActionList.length).fill(false);    setCheckboxDisplay(falseArray); // initilize check box  }, [displayActionList]);  const onChangeCheckbox = (n:any, newValue:any) => {     //console.log('onChangeCheckbox n,newValue: ', n, newValue);    setnewArray(newValue)    const newArray = [...checkboxDisplay];    newArray[n] = !checkboxDisplay[n]; //    setCheckboxDisplay(newArray);  };  const renderActionItem = ({ item, index }:{item:any, index:any}) => {    return (<TouchableOpacity        key={index}        activeOpacity={.7}        style={styles.touchableOpacity}        onPress={() => {}}><CheckBox          style={styles.checkBox}          tintColors={{ true: 'white', false: 'white' }}          value={checkboxDisplay[index]}          onValueChange= {(newValue) => onChangeCheckbox(index, newValue)}        /><Text style={styles.labelText}>{`${item.SequenceID}. ${item.EmergencyAction}`}</Text></TouchableOpacity>    )  }  const ActionHeader = () => {    return (<View style={styles.secondaryTitleView}><Text style={styles.eventTypeText}>role: {roleSelected.RoleName}</Text><Text style={styles.eventTypeText}>state: {stateSelected.StateName}</Text></View>    );  }  const EmptyListMessage = () => {    return (<View><ActionHeader /><Text style={styles.emptyListStyleText}>          no results were found !</Text></View>    );  };return (<>    {roleSelected  && stateSelected && displayActionList.length > 0 ?    (<View style={styles.container}><ActionHeader /><SafeAreaView style={styles.container}><FlatList          style={styles.flatListView}          data={displayActionList}          keyExtractor={(item, index) => index.toString()}            renderItem={({ item , index }) => renderActionItem({ item, index })}          ListEmptyComponent={EmptyListMessage}        /></SafeAreaView><View style={styles.BottomViewArea}><TouchableOpacity            style={{ alignSelf: 'flex-start', marginLeft: 60, flexDirection: 'row'}}          onPress={() => {          }}><Ionicons            name="send-sharp"            size={30}            color="white"          /><Text style={{ color:"white" }}>{''}Confirmation of operations</Text></TouchableOpacity></View><CommonModalAlert            returnToParent={() => {              setAlertModalVisiblity(false);              }             }            modalVisible={isAlertModalVisible}            message={modalMessage}            twoButton={true}          /></View>) : <EmptyListMessage />}</>  );}