Is there way to reduce the slow rendering of the data on the select option of react native?

Question

I'm quite new developing on react native, I have module where I need to display the data on the select options, by the way I am using native base for the UI components.

Redux Toolkit: For the state management,

Formik: For the form

Here is the scenario:

Regions - I need to list all data inside select option, then the Id of region will pass it to the next select option this is for province options.

Provinces - I need to list all data inside select option, then the Id of this province that I select will pass to the next select option to get all the cities.

Regions: 10 Items

Provinces: 20 Items

Cities: 40 items

Take note that. Regions, Cities, Provinces has a lot of data, When you try to think it my select option getting slow.

Here are the things that I did so far based on what I read on the articles to optimize the rendering of the data:

1. I need to use the React.memo to the components
2. Based on the articles I need to slice the data. But how? this is select option, I need to select.

Here is the code:

<CustomSelectionGeolocation
        placeholder="Region"
        color="#000"
        mt={1}
        name="region_id"
        selectedValue={values.region_id}
        onBlur={handleBlur('region_id')}
        onValueChange={(itemValue) => {
            setFieldValue("region_id", itemValue);
            HandleGetProvince(itemValue);
        }}
        selectItemLabel="Select Region"
        size="lg"
        fontSize="12"
        placeholderColor="#535353"
        fontWeight="400"
        data={regions?.data || []}
        icon="down"
        iconColor="#000">
</CustomSelectionGeolocation>

With Memo:

export const CustomSelectionGeolocation = React.memo((props) => {
    return (
        <Flex>
            <Select
                onBlur={props?.onBlur || ''}
                onValueChange={props?.onValueChange || ''}
                value={props?.value || ''}
                name={props?.name || ''}
                autoCorrect={false}
                borderRadius="5"
                autoCapitalize='none'
                borderWidth="0"
                selectedValue={props?.selectedValue || ''}
                placeholderTextColor={props?.placeholderColor || '#000'}
                size={props?.size || 'md'}
                fontWeight={props?.fontWeight || ''}
                fontSize={props?.fontSize || 15}
                placeholder={props?.placeholder || ''}
                InputRightElement={
                    <Icon
                        as={IconAnt}
                        name={props?.icon || null}
                        size={14}
                        mr={3}
                        color={props?.iconColor || '#000'}
                    />
                }
            >
    
                {
                    
                    props?.data?.map((res,i) => {
                        return (
                            <Select.Item key={i} label={res?.description} value={res?.code} />
                        )
                    })
                  
                }
                
            </Select>
        </Flex>
    )  
})

Problem: Let say the region,province,city already fill up the when I tried to press the submit button, You need to count 10 - 15 seconds to reveal the selected values logs.