React native custom picker doesnt show selected items - react-native

Question

I built a cutom model picker in react native. But when I select an item in the list it is not showing the selected value.
custom picker code
function ItemPicker({
icon,
items,
onSelectItem,
placeholder,
selectedItem,
label,
}) {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
<View style={styles.container}>
{icon && (
<MaterialCommunityIcons
name={icon}
size={20}
color={colors.medium}
style={styles.icon}
/>
)}
<Text style={styles.text}>
{selectedItem ? selectedItem.label : placeholder}
</Text>
<MaterialCommunityIcons
name="chevron-down"
size={20}
color={colors.gray}
/>
</View>
</TouchableWithoutFeedback>
<Modal visible={modalVisible} animationType="fade">
<View>
<Button title="Close" onPress={() => setModalVisible(false)} />
<FlatList
data={items}
keyExtractor={(item) => item.value.toString()}
persistentScrollbar
renderItem={({ item }) => (
<TouchableOpacity
label={item.label}
onPress={() => {
setModalVisible(false);
// onSelectItem(item);
}}
>
<Text style={styles.pickertext}>{item.label}</Text>
</TouchableOpacity>
)}
/>
</View>
</Modal>
</>
);
}
Item list and picker
const months = [
{ label: "January", value: 1 },
{ label: "Feburary", value: 2 },
{ label: "March", value: 3 },
{ label: "April", value: 4 },
{ label: "May", value: 5 },
{ label: "June", value: 6 },
{ label: "July", value: 7 },
{ label: "August", value: 8 },
{ label: "September", value: 9 },
{ label: "October", value: 10 },
{ label: "November", value: 11 },
{ label: "December", value: 12 },
];
<ItemPicker
selectedItem={month}
value={month}
months={months}
onSelectItem={(item) => setMonth(item.value)}
items={months}
icon="calendar-month"
placeholder="Choose Month"
/>
Here when I change the item picker's property onSelectItem={(item) => setMonth(item.value)} to onSelectItem={(item) => setMonth(item)} it's showing the selected item but the value doesn't submit.
output when onSelectItem={(item) => setMonth(item.value)}
output when onSelectItem={(item) => setMonth(item)}
How can I fix this?

Answer 1

Your problem is that ItemPicker is expecting selectedItem to be an object rather than a number. If you want month to be a number, then you have to change selectedItem to
<ItemPicker
selectedItem={months[month-1]}
value={month}
months={months}
onSelectItem={(item) => setMonth(item.value)}
items={months}
icon="calendar-month"
placeholder="Choose Month"
/>
If you are fine with month being an object rather than a number:
<ItemPicker
selectedItem={month}
value={month}
months={months}
onSelectItem={setMonth}
items={months}
icon="calendar-month"
placeholder="Choose Month"
/>
It may also be better in ItemPicker to change
<Text style={styles.text}>
{selectedItem ? selectedItem.label : placeholder}
</Text>
to
<Text style={styles.text}>
{selectedItem?.label || placeholder}
</Text>