Attempt to import and use NUMBERPLEASE in React Native Successfully - reactjs

Question

Below you can find the code created so far. You might see that this code works for a simple web program. But when you attempt to see how it is displayed on MOBILE this error code occurs -> (undefined is not an object (evaluating 'p.Picker.Item')
(Device))
Would anyone possibly have an idea of the reason for this error?
I'm new to REACT NATIVE.
import React, { useState } from 'react';
import {
View,
StyleSheet,
Text,
Animated,
Easing,
Pressable,
TextInput,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Constants from 'expo-constants';
import {Card} from 'react-native-paper';
import NumberPlease from 'react-native-number-please';
import { useHeaderHeight } from '#react-navigation/elements';
const OrderPizza = () => {
const initialValues = [{ id: "pizza", value: 3 }];
const [pizzas, setPizzas] = useState(initialValues);
const pizzaNumbers = [{ id: "pizza", label: "🍕", min: 0, max: 99 }];
return (
<View>
<Text>I would like</Text>
<NumberPlease
digits={pizzaNumbers}
values={pizzas}
onChange={(values) => setPizzas(values)}
/>
</View>
);
};
export default function DosingCalculator({ navigation }) {
const headerHeight = useHeaderHeight();
const topMargin = headerHeight + 'px 0 0 0';
const animatedValue = React.useRef(new Animated.Value(0)).current;
const startAnimation = (toValue) => {
Animated.timing(animatedValue, {
toValue,
duration: 400,
easing: Easing.linear,
useNativeDriver: false,
}).start();
};
const left = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: ['2%', '50%'],
extrapolate: 'clamp',
});
const scale = animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [1, 0.9, 1],
extrapolate: 'clamp',
});
return (
<LinearGradient colors={['#20c1c1', '#8dc642']} style={styles.gradient}>
<View style={styles.mainContainer}>
<View style={styles.container}>
<Text>
Secondary Readings
<View style={styles.sliderContainer}>
<Animated.View style={[styles.slider, { left }]} />
<Pressable
style={styles.clickableArea}
onPress={startAnimation.bind(null, 0)}>
<Animated.Text
style={[styles.sliderText, { transform: [{ scale }] }]}>
Show
</Animated.Text>
</Pressable>
<Pressable
style={styles.clickableArea}
onPress={startAnimation.bind(null, 1)}>
<Animated.Text
style={[styles.sliderText, { transform: [{ scale }] }]}>
Hide
</Animated.Text>
</Pressable>
</View>
</Text>
<View
style={{
flex: 1,
alignContent: 'center',
justifyContent: 'center',
padding: 12,
}}>
<Text>Pool Volume</Text>
<TextInput
style={{
borderRadius: 10,
padding: 8,
backgroundColor: '#f5f5f5',
}}
onChangeText={(text) => setGallons(text)}
/>
</View>
</View>
<View style={styles.container}>
<Text>Current</Text>
<OrderPizza/>
</View>
<View style={styles.container}>
<Text>Desired</Text>
</View>
</View>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
width: '100%',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
margin: 30,
flexDirection: 'row',
},
gradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
},
sliderContainer: {
width: '75%',
height: 50,
borderRadius: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#e0e0e0',
},
mainContainer: {
width: '100%',
margin: 8,
borderRadius: 10,
alignItems: 'center',
backgroundColor: 'white',
},
clickableArea: {
width: '50%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
sliderText: {
fontSize: 17,
fontWeight: '500',
},
slider: {
position: 'absolute',
width: '48%',
height: '90%',
borderRadius: 10,
backgroundColor: '#20c1c1',
},
});