React hook form not mapping properly fields in schema/default values object

Question

I have encountered a very strange situation, where React Hook Form in React-Native controller fills the default value of a text field with value of previously set component, the code for the form looks like this:

 const [step, setStep] = useState<1 | 2>(1);
  const lastStep = step === 2;

  const handleNext = (data: IReview) => {
    console.log({ data });
    !lastStep && setStep(2);
    if (lastStep) {
      console.log({ data });
    }
  };
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<IReview>({
    defaultValues: {
      reviewer: "",
      reviewText: "",
      customerService: 0,
      parking: 0,
      waitingTime: 0,
      higene: 0,
      overallSatisfaction: 0,
    },
  });
  return (
    <Overlay
      isVisible={visible}
      onBackdropPress={onPress}
      overlayStyle={styles.modalWrapper}
    >
      {!lastStep ? (
        <View>
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <LabelledSlider
                label="Customer service"
                value={value}
                onChange={onChange}
              />
            )}
            name="customerService"
          />
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <LabelledSlider
                label="Parking"
                value={value}
                onChange={onChange}
              />
            )}
            name="parking"
          />
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <LabelledSlider
                label="Waiting time"
                value={value}
                onChange={onChange}
              />
            )}
            name="waitingTime"
          />
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <LabelledSlider
                label="Higene"
                value={value}
                onChange={onChange}
              />
            )}
            name="higene"
          />
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <LabelledSlider
                label="Overall satisfaction"
                value={value}
                onChange={onChange}
              />
            )}
            name="overallSatisfaction"
          />
        </View>
      ) : (
        <View style={styles.textInputsWrapper}>
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <Input
                value={value}
                onChangeText={onChange}
                placeholder="Email"
              />
            )}
            name="reviewer"
          />
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => (
              <TextInput
                multiline
                numberOfLines={4}
                value={value}
                onChangeText={onChange}
                placeholder="Let us know..."
              />
            )}
            name="reviewText"
          />
        </View>
      )}
      <View style={styles.buttonWrapper}>
        {lastStep && (
          <Button
            icon={
              <Ionicons
                name={`arrow-back-circle-outline`}
                size={PLATFORM_WIDTH * 0.05}
                color={COLORS.greys["gray-800"]}
              />
            }
            buttonStyle={[
              styles.stepButton,
              { backgroundColor: COLORS.TERTIARY },
            ]}
            onPress={() => setStep(1)}
          />
        )}
        <Button
          icon={
            <Ionicons
              name={`arrow-${lastStep ? "up" : "forward"}-circle-outline`}
              size={PLATFORM_WIDTH * 0.05}
              color={COLORS.greys["gray-200"]}
            />
          }
          buttonStyle={[
            styles.stepButton,
            { backgroundColor: COLORS.FONT_COLOR },
          ]}
          onPress={handleSubmit((data) => handleNext(data))}
        />
      </View>
    </Overlay>
  );

and here on step 2 I have two text fields, and the defauld value is set to be an empty string, hovewer when I go to the step 2 the default values are filled with the values of a first and second component from step one. The more dtrange it gets when I click sumit nothing actually happens because those fields are being trated as untouched so when i enter step 2 my data object looks like so:

customerService: 3.168141592920354
higene: 3.4867256637168142
overallSatisfaction: 2.176991150442478
parking: 4.035398230088496
reviewText: ""
reviewer: ""
waitingTime: 3.2035398230088497

and when i type anything into the field it is:

customerService: 3.168141592920354
higene: 3.4867256637168142
overallSatisfaction: 2.176991150442478
parking: 4.035398230088496
reviewText: "4.035398230088496f"
reviewer: "3.168141592920354f"
waitingTime: 3.2035398230088497

Ill appreciate some help Thanks