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

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>
  )
}