react-native-picker won't populate data on edit form - react-native

Question

I'm using react-native-web and for the Native side, I'm using import { Picker } from '#react-native-picker/picker'
I'm using a reusable form modal for create and edit. On web, the data populates just fine but on iOS for example, the drop downs don't get set correctly. I've created a reusable component that has react-native-picker/picker as it's child component. So for example I set state on form mount like this:
const [languageAbility, setLanguageAbility] = useState<number>(
childProfile?.languageAbility?.id || 0,
)
const [grade, setGrade] = useState<number>(childProfile?.grade?.id || 0)
and on my components, they are set up like this:
<AccessibleSelect
selectedValue={grade}
options={childMenusData?.menus?.schoolGrades.map((sg) => ({
label: sg.title,
value: sg?.id,
}))}
onValueChange={(val: number) => setGrade(val)}
label={t('ChildForms.Grade')}
testID="grade"
inputStyle={styles.selectStyles}
tooltipText={isMobile ? 'What is a grade?' : ''}
tooltipContent={t('ChildForms.WhatIsAGradeContent')}
tooltipPlacement={'bottom'}
/>
</View>
{!isMobile && (
<View style={styles.inputContainerHalf}>
<Tooltip
text="What is a grade?"
content={t('ChildForms.WhatIsAGradeContent')}
placement={'right'}
/>
</View>
)}
</View>
<View
style={{
flexDirection: isMobile ? 'column' : 'row',
width: '100%',
margin: 0,
}}
>
<View
style={[
styles.inputContainerHalf,
{ marginRight: isMobile ? 0 : 30 },
]}
>
<AccessibleSelect
selectedValue={languageAbility}
options={childMenusData?.menus?.languageAbilities.map((la) => ({
label: la.title,
value: la.id,
}))}
onValueChange={(val: number) => setLanguageAbility(val)}
label={t('ChildForms.LanguageAbility')}
testID="languageAbility"
additionalContainerStyles={{ paddingTop: 0, paddingBottom: 0 }}
inputStyle={styles.selectStyles}
/>
</View>
</View>
And the actual Picker component (AccessibleSelect) looks like this:
return (
<View style={[styles.container, additionalContainerStyles]}>
<Picker
ref={refToAttachToInput}
style={[
Platform.OS === 'ios'
? styles.pickerIOS
: [
styles.picker,
{ borderColor, borderStyle: 'solid', borderWidth: 1 },
],
inputStyle,
]}
selectedValue={selectedValue}
onValueChange={onValueChange}
defaultValue={defaultValue && defaultValue}
itemStyle={styles.pickerText}
mode={isAndroid && 'dropdown'}
>
{options.map((o) => (
<Picker.Item label={o.label} key={o.value} value={o.value} />
))}
</Picker>
<View
style={[
styles.bottomContainer,
{ justifyContent: fieldError ? 'space-between' : 'flex-end' },
]}
>
{!!fieldError && (
<Text accessibilityLiveRegion="assertive" style={styles.errorText}>
{fieldError}
</Text>
)}
</View>
</View>
)
}