What is the possible reason of why react native MapView is lagging?

Question

My app have structure like this,

MapPage.js that contain expo-barcode-scanner wrapped with Modal and MapView. DetailsPage.js that contain search result/products' details.

User can use the barcode scanner or TextInput(also in MapPage, not wrapped in Modal) to search product ID and the app will navigate to DetailsPage for result. If result is not found, app will automatically navigate.goBack() to MapPage. If result existed, will goto the result and stay in DetailsPage.

User can also navigate to DetailsPage by pressing marker callout on MapView.

Here is situation:

1. user press on marker callout(navigate to DetailsPage), then press back(navigate.goBack()) to MapPage : No lagging
2. user search by TextInput, then back to MapPage: No lagging whether search result exist or not
3. user search by Barcode, result not exist, automatically back to MapPage: not lagging
4. user search by Barcode, result existed, stay in DetailsPage, user manually press back: LAGGING

Below codes for your references

//MapPage
            <MapView
                style={{ width: '100%', height: '100%' }}
                provider={PROVIDER_GOOGLE}
                showsMyLocationButton={true}
                showsUserLocation={true}
                region={{
                    latitude: region.latitude,
                    longitude: region.longitude,
                    latitudeDelta: region.latitudeDelta,
                    longitudeDelta: region.longitudeDelta,
                }}>
                <MapMarker
                    markerLocation={markers}
                    countryCode={country.countryCode}
                />
            </MapView>
...
                    <TextInput
                        placeholder={
                            i18n.t('SearchId')
                        }
                        placeholderTextColor="white"
                        onSubmitEditing={() =>
                            handleBarCodeScanned({ data: textSearchData })
                        }
                        onChangeText={(text) => {
                            settextSearchData(text.toUpperCase());
                        }}
                    />
                    <Pressable onPress={() => setqrcodeModalVisi(true)}>
                        <Ionicons
                            name="qr-code-outline"
                            size={33}
                            color="white"
                        />
                    </Pressable>
...
            <Modal
                visible={qrcodeModalVisi}
                animationType="slide"
                onRequestClose={() => setqrcodeModalVisi(false)}
                transparent={true}>
                <View>
                    <Pressable onPress={() => setqrcodeModalVisi(false)}>
                        <Feather
                            name="x"
                            size={24}
                            color="white"
                        />
                    </Pressable>
                    {!hasPermission && (
                        <View>
                            <Text
                                style={{
                                    color: colors.text,
                                }}>
                                Camera access denied.
                            </Text>
                            <Pressable onPress={() => getBarCodeScannerPermissions()}>
                                <Text style={{ color: colors.secondary }}>
                                    Goto setting page
                                </Text>
                            </Pressable>
                        </View>
                    )}
                    {hasPermission && (
                        <View
                            style={{
                                flex: 1,
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}>
                            <BarCodeScanner
                                onBarCodeScanned={
                                    scanned ? undefined : handleBarCodeScanned
                                }
                                style={{
                                    width: '100%',
                                    height: '80%',
                                }}
                            />
                        </View>
                    )}
                </View>
            </Modal>

//MapMarker
        <View>
            {markerLocation.map((array) => (
                <Marker
                    key={array.title}
                    coordinate={{
                        latitude: array.latitude,
                        longitude: array.longitude,
                    }}
                    image={require('../../../assets/icons/map_marker.png')}
                    title={''}
                    description={''}
                    onCalloutPress={() => handleMapMarkerPress(array.regionCode)}>
                    <Callout>
                        <View
                            style={{
                                backgroundColor: 'white',
                                width: 180,
                                paddingVertical: 5,
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}>
                            <Text
                                style={{
                                    width: '80%',
                                    textAlign: 'center',
                                    color: colors.secondary,
                                    fontWeight: 'bold',
                                }}>
                                {array.title}
                            </Text>
                            <View
                                style={{
                                    backgroundColor: colors.secondary,
                                    width: '80%',
                                    height: 25,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    marginTop: 2,
                                    flexDirection: 'row',
                                    marginVertical: 5,
                                }}>
                                <Text style={{ color: 'white', fontWeight: 'bold' }}>
                                    {i18n.t('MapMarkerBtn')}
                                </Text>
                            </View>
                        </View>
                    </Callout>
                </Marker>
            ))}
        </View>

Thanks!