TypeError: Cannot read property 'length' of undefined, js engine: hermes

[Joezer]

I'm using react-native's TextInput with NumericFormat in the customInput prop, but whenever I try to edit I get an error.
If I try to delete values I get the error: "TypeError: Cannot read property 'length' of undefined, js engine: hermes" if I try to add values I get the error "TypeError: Cannot read property 'start' of undefined, js engine: hermes".

I hope I can edit the values without these errors

Follow the code link
https://snack.expo.dev/@joezer.pnt/erroreactnumberformat

The error appears when trying to edit the values either increasing or decreasing the values

Please check the browsers where the issue is seen

• Chrome
• [ X] Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

If you decide to get the code and use it in an application, install

1. "npm install @hookform/resolvers yup"
2. If yup error appears, install "npm i yup@latest"

Follow the code

`
import React from 'react';
import { yupResolver } from '@hookform/resolvers/yup';
import { useState, useEffect } from 'react';
import { useForm, Controller } from 'react-hook-form';
import * as Yup from 'yup';
import { Text, TextInput, View, StyleSheet, SafeAreaView,TouchableOpacity } from 'react-native';
import { NumericFormat as NumberFormat } from 'react-number-format';

export type TOnSchedule = {
OrderQty: number;
PriceLimit: number;
};

const setaDados: TOnSchedule = {
OrderQty: 100,
PriceLimit: 11,
}

//Defina o esquema de validação usando Yup
const schema = Yup.object().shape({
OrderQty: Yup.number().required('Qtd é obrigatória').min(0.01, "O quantidade tem que ser maior que 1"),
PriceLimit: Yup.number().required('Valor obrigatório').min(0.01, "O valor tem que ser maior que R$0,00"),
});

const OrderOnSchedule = () => {

const { control, reset, handleSubmit, setValue, watch, formState: { errors } } = useForm({
mode: 'all',
resolver: yupResolver(schema),
defaultValues: {
OrderQty: 200,
PriceLimit: 12.23,
}
});

const onSubmit = async (data: TOnSchedule) => {
console.log("Dados enviado: ", JSON.stringify(data));
};

useEffect(() => {
reset({
OrderQty: 100,
PriceLimit: 121212.125454,
});
}, [reset]);

return (


<Controller
control={control}
name="OrderQty"
render={({ field: { onChange, value } }) => (
<NumberFormat
value={(value ?? 0).toString()} // Uso de '??' para fallback se value for undefined ou null
displayType={'input'}
thousandSeparator={true}
onValueChange={(values) => {
const numValue = values.value ? parseFloat(values.value) : 0; // Fallback para 0 se value
onChange(numValue);
}}
customInput={TextInput}
keyboardType="numeric"
style={styles.input}
/>
)}
/>

    <Controller
      control={control}
      name="PriceLimit"
      render={({ field: { onChange, value } }) => (
        <NumberFormat
          value={(value ?? 0).toString()}
          displayType={'input'}
          decimalScale={2}
          fixedDecimalScale={true}
          thousandSeparator={true}
          decimalSeparator="."
          prefix="R$ "
          onValueChange={(values) => {
            const numValue = values.value ? parseFloat(values.value) : 0; 
            onChange(numValue);
          }}
          customInput={TextInput}
          keyboardType="numeric"
          style={styles.input}
        />
      )}
    /> 
     <TouchableOpacity style={styles.submitButton} onPress={handleSubmit(onSubmit)}>
      <Text style={styles.submitButtonText}>Enviar Dados</Text>
    </TouchableOpacity>  
  </View>
</SafeAreaView>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
input: {
borderWidth: 1,
borderColor: 'gray',
padding: 10,
marginTop: 5,
marginBottom: 20,
},
errorText: {
color: 'red',
marginBottom: 10,
},
submitButton: {
backgroundColor: 'blue',
color: 'white',
textAlign: 'center',
padding: 10,
borderRadius: 5,
},
submitButtonText: {
color: 'white',
fontSize: 16,
}
});

export default OrderOnSchedule;

`