Select is causing memory issues, dropdown not responding

[DavidSolus]

When I close the form, I get this error Error: Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.

This error only occurs when I have the select type in my formConfigArray. Also, the dropdown doesn't work at all. Clicking on it doesn't do anything.

import { StyleSheet, Text, View, ScrollView,KeyboardAvoidingView } from 'react-native';
import React, { useContext, Fragment} from 'react';
import { FormBuilder } from 'react-native-paper-form-builder';
import { useForm } from 'react-hook-form';
import { Button, TextInput } from 'react-native-paper';
import { AuthContext } from '../contexts/AuthContext';
import { JobStatusContext } from '../contexts/JobStatusContext';

const JobStatusForm = ({navigation}) => {

    const {user} = useContext(AuthContext)
    const {createJobStatus, resumeList} = useContext(JobStatusContext)

    // const navigation = useNavigation();

    const {control, setFocus, handleSubmit} = useForm({
        defaultValues: {
            auth_ID: user.uid,
            companyName: '',
            position: '',
            status: '',
            note: '',
            resume: '',
        },
        mode: 'onChange',
    });

    return (
        <KeyboardAvoidingView
            behavior='padding'
            style = {styles.container}>
            <View style={styles.containerStyle}>
                <View style={styles.btnContainer}>
                    <Button
                        // mode={'contained'}
                        style={styles.btn}
                        onPress={()=>{
                            navigation.replace('JobStatus')
                        }}>
                        Cancel
                    </Button>
                    <Button
                        // mode={'contained'}
                        style={styles.btn}
                        onPress={handleSubmit((data) => {
                            createJobStatus(data)
                            navigation.replace('JobStatus')
                        //   console.log('form data', data);
                        })}>
                        Add
                    </Button>
                </View>
                <ScrollView contentContainerStyle={styles.scrollViewStyle}>
                    <FormBuilder
                        control={control}
                        setFocus={setFocus}
                        formConfigArray={[

                            {
                                type: 'text',
                                name: 'companyName',
                                rules: {
                                    required: {
                                        value: true,
                                        message: 'Company name is required',
                                    },
                                },
                                textInputProps: {
                                    label: 'Company Name',
                                },
                            },
                            {
                                type: 'text',
                                name: 'position',
                                rules: {
                                    required: {
                                        value: true,
                                        message: 'Position is required',
                                    },
                                },
                                textInputProps: {
                                    label: 'Position',
                                },
                            },
                            {
                                type: 'text',
                                name: 'status',
                                rules: {
                                    required: {
                                        value: true,
                                        message: 'Status is required',
                                    },
                                },
                                textInputProps: {
                                    label: 'Status',
                                },

                            },
                            {
                                type: 'text',
                                name: 'note',
                                textInputProps: {
                                    label: 'Note',
                                },
                            },
                            {
                                type: 'select',
                                name: 'resume',
                                rules: {
                                    required: {
                                        value: true,
                                    },
                                },
                                textInputProps: {
                                    label: 'Resume',
                                },
                                options: [
                                    {
                                        value: 'test1.pdf',
                                        lable:'test1.pdf'
                                    },
                                    {
                                        value:'test2.pdf',
                                        lable:'test2.pdf'
                                    },
                                    {
                                        value:'test3.pdf',
                                        lable:'test3.pdf'
                                    }
                                ]
                            },
                        ]}
                    />
                </ScrollView>
            </View>
        </KeyboardAvoidingView>
    );
}

export default JobStatusForm

const styles = StyleSheet.create({
    container: {
        flex:0.60,
        alignContent: "center",
        justifyContent: "center",
        paddingHorizontal:25
      },
    btn:{
        flexDirection:'row-reverse',
        marginRight: 5,
        alignItems:'flex-end',

    },
    btnContainer:{
        flexDirection:'row',
        justifyContent:'space-between'
    }

    // containerStyle: {
    //     flex: 1,
    //   },
    //   scrollViewStyle: {
    //     flex: 1,
    //     padding: 15,
    //     justifyContent: 'center',
    //   },
    //   headingStyle: {
    //     fontSize: 30,
    //     textAlign: 'center',
    //     marginBottom: 40,
    //   },
});

[fateh999]

You have to wrap your code in App.js file with Provider from react-native-paper to make select work as select is using Menu component from react-native-paper