[BUG] - I'm having an issue with resetting the values back to 0 on submit

[verbowersock]

When I attempt to reset the values back to 0 after submitting, the component doesn't rerender

const [ozValue, setOzValue] = useState(0);
const [minuteValue, setMinuteValue] = useState(0);
const clearValues = () => {
    setOzValue(0);
    setMinuteValue(0);
  };

 const onSubmitNext = () => {
    setOzValue(0);
    setMinuteValue(0);
  };

  return (
    <KeyboardAwareScrollView contentContainerStyle={styles.modalContainer}>
      <Text style={styles.modalHeader}>{title}</Text>
      <View style={styles.numInputContainer}>
        <Text style={styles.subHeader}>Enter oz amount</Text>
        <NumericInput
          value={ozValue}
          onChange={(ozValue) => setOzValue(ozValue)}
          minValue={0}
          totalWidth={150}
          totalHeight={35}
          iconSize={35}
          step={0.5}
          valueType="real"
          rounded
          textColor="black"
          rightButtonBackgroundColor={Colors[colorScheme].tabIconSelected}
          leftButtonBackgroundColor={"#a57ee0"}
          iconStyle={{
            color: "white",
            fontSize: 20,
            fontWeight: "bold",
          }}
        />
      </View>
      <View style={styles.numInputContainer}>
        <Text style={styles.subHeader}>Enter duration</Text>
        <NumericInput
          value={minuteValue}
          minValue={0}
          onChange={(minuteValue) => setMinuteValue(minuteValue)}
          totalWidth={150}
          totalHeight={35}
          iconSize={35}
          step={1}
          valueType="real"
          rounded
          textColor="black"
          rightButtonBackgroundColor={Colors[colorScheme].tabIconSelected}
          leftButtonBackgroundColor={"#a57ee0"}
          iconStyle={{
            color: "white",
            fontSize: 20,
            fontWeight: "bold",
          }}
        />
      </View>
      <View style={styles.buttonContainer}>
        <Button
          color={Colors[colorScheme].tabIconSelected}
          mode="contained"
          onPress={onSubmit}
          disabled={disabled()}
        >
          Add
        </Button>
        <Button
          color={Colors[colorScheme].tabIconSelected}
          mode="contained"
          disabled={disabled()}
          onPress={onSubmitNext}
        >
          Add&Next
        </Button>
        <Button mode="contained" color={"#a57ee0"} onPress={modalClose}>
          Cancel
        </Button>
      </View>
    </KeyboardAwareScrollView>
  );
}

Expected behavior I expect the values to reset back to 0 on state change.

Screenshots or Screen recording

[EHRdev]

I also went through the same thing, the component doesn't render to the parent like a does.

I recommend another similar package, updated with on hooks