React Hook Form multi select not working in React Native Dropdown Picker

Question

I am trying to do a multi select using React Native Dropdown Picker using React Hook Form Controller. I could get the multi select values in MultiSelect Form component but on submit I don't get the values in "handleSubmit" data. My code is below. Any help is much appreciated. Thank you!

import {View, StyleSheet, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {useForm} from 'react-hook-form';

import RHFFormMultiSelect from '../../components/RHFFormMultiSelect';
import RHFTextInput from '../../components/RHFTextInput';
import RHFFormSelect from '../../components/RHFFormSelect';
import {languageList, genderList} from '../../utils/dropdownLists';

const EditProfileOne = () => {
  const defaultValues = {
    firstName: '',
    gender: '',
    language: [],
  };

  const {control, handleSubmit} = useForm({
    defaultValues: defaultValues,
  });

  const navigation = useNavigation();

  const handleNextPress = data => {
    console.log(data);
    setPageOne(data);
    navigation.navigate('EditProfileTwo');
  };
  return (
    <>
      <Header title="Complete your Profile" showBackArrow={true} />
      <ScrollView showsVerticalScrollIndicator={false} style={{flex: 1, backgroundColor: colors.bgColor}}>
        <View style={styles.container}>
          <RHFTextInput
            name="firstName"
            placeholder="First Name"
            control={control}
            rules={NAME_RULES}
          />
          <RHFFormSelect
            name="gender"
            placeholder="Gender"
            dropdownList={genderList}
            searchable={false}
            control={control}
            rules={{
              required: 'Gender is required',
            }}
          />
          <RHFFormMultiSelect
            name="language"
            placeholder="Languages Spoken"
            dropdownList={languageList}
            dropDownDirection="TOP"
            control={control}
            rules={{
              required: 'Languages spoken is required',
            }}
          />
          <AppButton
            title="Next"
            onPress={handleSubmit(handleNextPress)}
            style={{zIndex: -1}}
          />
        </View>
      </ScrollView>
    </>
  );
};

Below is my MultiSelect Component:

import {View, StyleSheet} from 'react-native';
import {Controller} from 'react-hook-form';
import DropDownPicker from 'react-native-dropdown-picker';
import {useState} from 'react';

import colors from '../config/colors';
import AppText from './AppText';

const RHFFormMultiSelect = ({
  control,
  name,
  placeholder,
  dropdownList,
  searchable = false,
  rules = {},
  secureTextEntry,
  dropDownDirection = 'TOP',
  min = 1,
  max = 4,
}) => {
  const [listOpen, setListOpen] = useState(false);
  return (
    <View style={{zIndex: -1}}>
      <Controller
        control={control}
        name={name}
        rules={rules}
        render={({field: {value, onChange}, fieldState: {error}}) => {
          console.log(value); // Here I get values in array e.g.["french", "german", "english"]
          return (
            <>
              <DropDownPicker
                style={styles.dropdown}
                placeholder={placeholder}
                placeholderStyle={styles.dropdownPlaceholder}
                multiple={true}
                min={min}
                max={max}
                mode="BADGE"
                open={listOpen}
                setOpen={() => setListOpen(!listOpen)}
                items={dropdownList}
                value={value}
                setValue={item => onChange(item)}
                listMode="SCROLLVIEW"
                dropDownDirection={dropDownDirection}
                searchable={searchable}
                autoScroll
              />
              {error && (
                <AppText style={styles.error}>
                  {error.message || 'Error!'}
                </AppText>
              )}
            </>
          );
        }}
      />
    </View>
  );
};

When I console log the value in render above I get the values in array '["french", "german", "english"]' but in handleNextPress data I get values as '[Function anonymous]'