undefined is not a function near values.children.map formik react native

[abdukasim]

I am using Formik in React native to handle forms in my React native app.

I want to show a field for children. If the person filling the form has children then they check the radio button with the label 'yes'. When the user focuses on the child name field I keep getting:

TypeError: undefined is not a function (near '...values.children.map...')

I took the code from Formik documentation here: https://formik.org/docs/examples/field-arrays
<Formik initialValues={{ name: "", birthday: "", sex: "", maritalStatus: "", spouse: "", children: [{ name: "", age: "", schooling: "" }], job: "", rent: "", address: "", phone: "", health: "", skills: "", }}
`
<RadioForm
radio_props={radio_props}
initial={-1}
formHorizontal={true}
// labelHorizontal={true}
buttonColor={brand}
selectedButtonColor={brand}
animation={true}
onPress={(value) => {
setRadioButton(value);
values.children = [{ name: "", age: "", schooling: "" }];
}}
style={{ marginVertical: 5 }}
/>

            {radioButton == 0 && (
              <FieldArray name="children">
                {({ insert, remove, push }) => (
                  <View>
                    {console.log(values.children)}
                    {values.children.length > 0 &&
                      values.children.map((child, index) => (
                        <View key={index}>
                          <CustomTextInput
                            label="Child Name"
                            name={`children.${index}.name`}
                            icon="child"
                            placeholder="children"
                            placeholderTextColor={darkLight}
                            onChangeText={handleChange("children")}
                            // onBlur={handleBlur}
                          />
                          <CustomTextInput
                            label="Child Age"
                            name={`children.${index}.age`}
                            icon="child"
                            placeholder="children"
                            placeholderTextColor={darkLight}
                            onChangeText={handleChange("children")}
                            // onBlur={handleBlur}
                          />
                          <CustomTextInput
                            label="Child Schooling"
                            name={`children.${index}.schooling`}
                            icon="child"
                            placeholder="children"
                            placeholderTextColor={darkLight}
                            onChangeText={handleChange("children")}
                            // onBlur={handleBlur}
                          />
                          <View style={styles.childrenButton}>
                            <StyledButton onPress={() => remove(index)}>
                              <ButtonText>Remove</ButtonText>
                            </StyledButton>
                            <StyledButton
                              onPress={() =>
                                push({ name: "", schooling: "" })
                              }
                            >
                              <ButtonText>Add Child</ButtonText>
                            </StyledButton>
                          </View>
                        </View>
                      ))}
                  </View>
                )}
              </FieldArray>
            )}

`