Как передать данные в родительский компонент react-native

Столкнулся с проблемой "пинга" при проброске данных наверх (далее скрины)

Мой компонент имеет такой путь вызова SetupNotificationsScreen.js->SetupNotificationsField.js->SetupPickDaysComponent.js

SetupNotificationsScreen.js:

class SetupNotificationsScreen extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.props.navigation.setOptions(this.navigationOptions);
  }
  state = {
    currentNotificationSettings: {
      days: [],
      time: "13:00",
      cityId: this.props.route.params.cityId,
    },
    valid: false,
  };
  validation = () => {
    const data = this.state.currentNotificationSettings;
    let valid = true;
    valid = data.days.length !== 0 && valid;
    valid = data.time !== "" && valid;
    valid = data.cityId !== null && valid;
    return valid;
  };
  onPressHandler = (data) => {
    const valid = this.validation();
    this.setState((oldState) => ({
      ...oldState,
      currentNotificationSettings: { ...data },
      valid,
    }));
    console.log("SetupNotificationsScreen state:");
    console.log(this.state);
  };
  onDonePressHandler() {}
  navigationOptions = {
    title: "Setup notifications",
    headerRight: () => (
      <TouchableOpacity
        activeOpacity={APP_THEME.ON_TOUCH_OPACITY_CHANGE}
        disabled={!this.state.valid}
        onPress={this.onDonePressHandler}
      >
        <Text
          style={
            this.state.valid
              ? styles.headerText
              : { ...styles.headerText, ...styles.disabled }
          }
        >
          Done
        </Text>
      </TouchableOpacity>
    ),
  };
  render() {
    const { cityId } = this.props.route.params;
    return (
      <View style={styles.container}>
        <View style={styles.wrapper}>
          <SetupNotificationsField
            cityId={cityId}
            onPress={this.onPressHandler}
          />
        </View>
      </View>
    );
  }
}

SetupNotificationsField.js

export const SetupNotificationsField = ({ cityId, onPress}) => {
  //TODO: change error with ping
  const initialState = {
    days: [],
    time: "13:00",
    cityId: cityId,
  };
  const [state, setState] = useState(initialState);

  const onChangeTimeHandler = (time) => {};


  const onChangeDaysHandler = (index) => {
    if (state.days.find((d) => d === index)) {
      setState((oldState) => ({
        ...oldState,
        days: state.days.filter((d) => d !== index),
      }));
    } else {
      setState((oldState) => ({
        ...oldState,
        days: [...state.days, index],
      }));
    }
    console.log("SetupNotificationsField state:");
    console.log(state);
    onPress(state);
  };

  return (
    <View style={styles.wrapContent}>
      <Text style={styles.Label}>ENTER TIME</Text>
      <View style={styles.blockWrapper}>
        <SetupEnterTimeComponent
          onPress={onChangeTimeHandler}
        />
      </View>
      <View style={styles.blockWrapper}>
        <Text style={styles.Label}>PICK DAY(S)</Text>
        <SetupPickDaysComponent
          onPress={onChangeDaysHandler}
        />
      </View>
      <View style={styles.blockWrapper}>
        <Text style={styles.Label}>CHOOSE CITY</Text>
        <SetupChooseCityComponent />
      </View>
    </View>
  );
};

SetupPickDaysComponent.js

export const SetupPickDaysComponent = ({ onPress }) => {
  let arrDays = {
    1: { value: "M", marked: false },
    2: { value: "T", marked: false },
    3: { value: "W", marked: false },
    4: { value: "TH", marked: false },
    5: { value: "F", marked: false },
    6: { value: "SA", marked: false },
    7: { value: "S", marked: false },
  };
  const [state, setState] = useState(arrDays);
  const renderDayButtons = (arr) => {
    console.log("SetupPickDaysComponent state:");
    console.log(state);
    return Object.keys(arr).map((key, index) => {
      const el = arr[key];
      let style = index < 5 ? styles.Button : styles.ButtonWeekends;
      return (
        <TouchableOpacity
          key={el.value}
          activeOpacity={APP_THEME.ON_TOUCH_OPACITY_CHANGE}
          onPress={() => {
            setState({ ...state, [key]: { ...el, marked: !el.marked } });
            onPress(key);
          }}
          style={
            el.marked
              ? { ...style, borderWidth: 2 }
              : { ...style, borderWidth: 0 }
          }
        >
          <Text style={styles.Text}>{el.value}</Text>
        </TouchableOpacity>
      );
    });
  };

  return (
    <View style={styles.Wrapper}>
      <View style={styles.WrapperButtons}>{renderDayButtons(state)}</View>
    </View>
  );
};

Скрины логов и работы программы:

Как видно из логов проброска наверх происходит с пингом в 2 рендера. Как это исправить?