labelField combination Error

[HoseinAsadi]

"dataFromParent": [
{
"id": 25534968,
"name": "Text @@@1",
"province": {
"id": 1,
"name": "subText 1",
}
},
{
"id": 31220482,
"name": "Text 2",
"province": {
"id": 1,
"name": "subText 2",
}
}
],

const DropdownComponent = ({ placeholder, dataFromParent, onSelect, onDelete, errorText, label, selectedValue, styleChild }) => {
const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false);

// Callback function to pass the selected value to the parent
const handleChange = (item) => {
    setValue(item.title);
    setIsFocus(false);

    // Call the onSelect callback with the selected value
    if (onSelect) {
        onSelect(item.title);
    }
};

const handleDelete = () => {
    setValue(null);
    // Call the onDelete callback to remove the selected value
    if (onSelect) {
        onSelect("")
    }
};

const renderLabel = () => {
    if (value || isFocus) {
        return (
            <Text style={[style.showLabel,]}>
                {label}
            </Text>
        );
    }
    return null;
};

const renderDeleteIcon = () => {
    if (value) {
        return (
            <TouchableOpacity onPress={handleDelete}>
                <Text style={styles.deleteIcon}>❌</Text>
            </TouchableOpacity>
        );
    } else {
        return <ArrowDownIconSvg />
    }
    return null;
};

return (
    <View style={[styleChild]}>
        {renderLabel()}

        <Dropdown
            style={[styles.dropdown]}
            placeholderStyle={styles.placeholderStyle}
            selectedTextStyle={styles.selectedTextStyle}
            inputSearchStyle={styles.inputSearchStyle}
            iconStyle={styles.iconStyle}
            data={dataFromParent}
            itemTextStyle={styles.itemTextStyle}
            search
            maxHeight={300}
            minHeight={100}
            labelField={(item) => `${item?.name || ''} - ${item?.province?.name || ''}`}
            valueField="name"
            searchField={(item) => `${item.name} - ${item.province?.name}`}
            value={value}
            placeholder={placeholder}
            searchPlaceholder="search..."
            onFocus={() => setIsFocus(true)}
            onBlur={() => setIsFocus(false)}
            onChange={handleChange}
            renderLeftIcon={renderDeleteIcon} // Render delete icon on the right side
            renderItem={(item) => (
                <Text style={{ backgroundColor: 'red', color: 'blue' }}>
                    {item?.name} - {item?.province?.name}
                </Text>
            )}
        />
        {errorText && (
            <Text style={styles.errorText}>{errorText}</Text>
        )}
    </View>
);

};

export default DropdownComponent;

const styles = StyleSheet.create({

dropdown: {
    height: 40,
    borderRadius: 4,
    borderWidth: 0.3,
    borderColor: '#575757',
    paddingLeft: 5,
    paddingRight: 5

},
itemTextStyle: {
    fontSize: 16,
    paddingRight: 5,
    textAlign: 'right',
    fontFamily: 'IRANYekanMediumFaNum',
    fontSize: 13,
    color: '#575757',

},
errorText: {
    color: 'red',
    fontSize: 14,
    marginTop: 5,
},
placeholderStyle: {
    fontSize: 16,
    color: '#535353',
    paddingRight: 5,
    textAlign: 'right',
    fontFamily: 'IRANYekanMediumFaNum',
    fontSize: 13,
    color: '#ABABAB',
},
selectedTextStyle: {
    fontSize: 16,
    textAlign: 'right',
    fontFamily: 'IRANYekanMediumFaNum',
    fontSize: 13,
    color: '#575757',
},
iconStyle: {
    position: 'absolute',
    display: 'none',
    width: 20,
    height: 20,
},
inputSearchStyle: {
    height: 40,
    fontSize: 16,
    fontFamily: 'IRANYekanMediumFaNum',
    fontSize: 13,
    color: '#575757',
    textAlign: 'right',
},
deleteIcon: {
    fontSize: 20,
    color: 'red',
    marginLeft: 5,
},

});

When I use the labelField or searchField combination, the following error is displayed but in renderItem show result:
ERROR TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes