Изменение значка после клика

Question

В настоящее время я пытаюсь выполнить настройку, поэтому после нажатия на значок значок должен измениться. Я могу заставить все остальное работать, кроме смены иконки. Я думаю, потому что у меня нет правильного условия. Может быть, я делаю это неправильно, но я не знаю. Пожалуйста, скажите мне, если это так.

В основном у меня есть две иконки, одна из которых открывает модальное поле datetimepicker, и после того, как уведомление было установлено, значок должен измениться, чтобы отменить значок уведомления.

CODE

const NotificationButtons = () => {
      if (condition)  {
        return <Fontisto name='date' size={20} color='#000' onPress={showDatePicker} />
      } else {
        return <Feather name='bell-off' size={20} color='#000' onPress={cancelNotifications} />
      }
    }

ОТДЫХ КОДОВ

import React, { useState } from "react";
import { View, Text } from "react-native";
import PushNotification from "react-native-push-notification";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import Fontisto from 'react-native-vector-icons/Fontisto';
import Feather from 'react-native-vector-icons/Feather';

const dateTimePicker = () => {
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

    const showDatePicker = () => {
      setDatePickerVisibility(true);
    };

    const hideDatePicker = () => {
      setDatePickerVisibility(false);
    };

    const handleConfirm = date => {
      console.warn("A date has been picked: ", date);
      hideDatePicker();
    };

    const notification = () => {
        PushNotification.configure({
            // (optional) Called when Token is generated (iOS and Android)
            onRegister: function(token) {
              console.log("TOKEN:", token);
            },

            // (required) Called when a remote or local notification is opened or received
            onNotification: function(notification) {
              console.log("NOTIFICATION:", notification);
            },

            // Should the initial notification be popped automatically
            // default: true
            popInitialNotification: true,

            /**
             * (optional) default: true
             * - Specified if permissions (ios) and token (android and ios) will requested or not,
             * - if not, you must call PushNotificationsHandler.requestPermissions() later
             */
            requestPermissions: true
          });
    }

    const NotificationButtons = () => {
      if (condition)  {
        return <Fontisto name='date' size={20} color='#000' onPress={showDatePicker} />
      } else {
        return <Feather name='bell-off' size={20} color='#000' onPress={cancelNotifications} />
      }
    }

    const sheduledNotifications = (date) => {
        PushNotification.localNotificationSchedule({
            //... You can use all the options from localNotifications
            priority: 'high',
            message: "My Notification Message", // (required)
            date
          });

    }

    const cancelNotifications = () => {
      PushNotification.cancelAllLocalNotifications();
    }

    return (
      <View>
        <NotificationButtons />
        <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode="datetime"
          onConfirm={sheduledNotifications}
          onCancel={hideDatePicker}
          date={new Date()}
        />
      </View>
    );
  };

  export default dateTimePicker;