@firebase/firestore: Firestore (8.2.1): Connection WebChannel transport errored

[Ambeensaleem]

hi, i am new here,
Since a few days i am getting an error while trying to communicate via Firebase/ Firestore. but on Firebase/Auth its works.

Relevant Code:
error:
WARN [2022-05-01T20:23:25.854Z] @firebase/firestore: Firestore (8.2.2): Connection WebChannel transport errored: {"a": {"C": null, "K": [Circular], "a": {"A": 0, "B": [U], "C": true, "F": 45000, "G": false, "I": true, "J": -1, "K": "wKg7rs-zITu38kbpMr_F7Q", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 29090, "Ta": 1, "U": true, "Ua": 10000, "V": 4, "X": false, "Y": [Object], "a": null, "b": [zd], "c": [bc], "f": [Z], "fa": false, "g": [Array], "ga": undefined, "h": null, "ha": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "i": null, "ia": "", "j": null, "ja": 8, "l": null, "m": null, "ma": 12, "na": [U], "o": 3, "oa": 600000, "pa": "Po2aekkae-5DeZoOCrO35mxuxOxUb3npHweGHiHlFQE", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/insta-clone-fb-28c9a/databases/(default)"}, "c": {"a": [Object], "b": 4, "src": [Circular]}, "f": {"a": [Circular]}, "i": undefined, "j": false, "l": true, "m": true, "o": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel"}, "defaultPrevented": false, "status": 1, "target": {"C": null, "K": [Circular], "a": {"A": 0, "B": [U], "C": true, "F": 45000, "G": false, "I": true, "J": -1, "K": "wKg7rs-zITu38kbpMr_F7Q", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 29090, "Ta": 1, "U": true, "Ua": 10000, "V": 4, "X": false, "Y": [Object], "a": null, "b": [zd], "c": [bc], "f": [Z], "fa": false, "g": [Array], "ga": undefined, "h": null, "ha": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "i": null, "ia": "", "j": null, "ja": 8, "l": null, "m": null, "ma": 12, "na": [U], "o": 3, "oa": 600000, "pa": "Po2aekkae-5DeZoOCrO35mxuxOxUb3npHweGHiHlFQE", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/insta-clone-fb-28c9a/databases/(default)"}, "c": {"a": [Object], "b": 4, "src": [Circular]}, "f": {"a": [Circular]}, "i": undefined, "j": false, "l": true, "m": true, "o": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel"}, "type": "c"}

The screen where i used firestore
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from "react-native";
import React from "react";
import { Formik } from 'formik'
import * as Yup from 'yup'
import Validator from 'email-validator'
import { firebase, db } from "../../Firebase";

const SignInForm = ({ navigation }) => {
const SignInFormSchema = Yup.object().shape({
email: Yup.string().email().required("An email is required"),
username: Yup.string().required().min(2, "A username is required"),
password: Yup.string()
.required()
.min(6, 'Your password has to have at least 6 characters')
})

const getRandomprofilepicture = async () => {
    const response = await fetch('https://randomuser.me/api')
    const data = await response.json()
    return data.results[0].picture.large
}

const onSignUp = async (email, password, username) => {
    try {
        const authUser = await firebase
            .auth()
            .createUserWithEmailAndPassword(email, password)
        db.collection('users').add({
            owner_uid: authUser.user.uid,
            username: username,
            email: authUser.user.email,
            profile_picture: await getRandomprofilepicture()
        })

    } catch (error) {
        Alert.alert("My Lord....", error.message)
    }
}

return (
    <View style={styles.wrapper}>
        <Formik
            initialValues={{ email: '', username: '', password: '', }}
            onSubmit={values => {
                onSignUp(values.email, values.username, values.password)
            }}
            validationSchema={SignInFormSchema}
            validateOnMount={true}
        >
            {({ handleSubmit, handleBlur, handleChange, values, isValid }) => (
                <>
                    <View style={[styles.inputfield,
                    {
                        borderColor:
                            values.email.length < 1 || Validator.validate(values.email)
                                ? '#ccc'
                                : 'red'
                    }
                    ]}>
                        <TextInput
                            placeholder="Email"
                            placeholderTextColor='#444'
                            autoCapitalize='none'
                            keyboardType='email-address'
                            textContentType='emailAddress'
                            autoFocus={true}
                            onChangeText={handleChange('email')}
                            onBlur={handleBlur('email')}
                            value={values.passwemailord}
                        />
                    </View>

                    <View style={[styles.inputfield,
                    {
                        borderColor:
                            1 > values.username.length || values.username.length >= 9
                                ? '#ccc'
                                : 'red'
                    }
                    ]}>
                        <TextInput
                            placeholder="Username"
                            placeholderTextColor='#444'
                            autoCapitalize='none'
                            autoCorrect={false}
                            textContentType='username'
                            onChangeText={handleChange('username')}
                            onBlur={handleBlur('username')}
                            value={values.username}

                        />
                    </View>

                    <View style={[styles.inputfield,
                    {
                        borderColor:
                            1 > values.password.length || values.password.length >= 6
                                ? '#ccc'
                                : 'red'
                    }
                    ]}>
                        <TextInput
                            placeholder="Password"
                            placeholderTextColor='#444'
                            autoCapitalize='none'
                            autoCorrect={false}
                            secureTextEntry={true}
                            keyboardType='email-address'
                            textContentType='password'
                            onChangeText={handleChange('password')}
                            onBlur={handleBlur('password')}
                            value={values.password}

                        />
                    </View>

                    <View style={{ marginTop: 20 }}>
                        <TouchableOpacity style={styles.button(isValid)}
                            disabled={!isValid}
                            onPress={handleSubmit}>
                            <Text style={styles.textStyle}>Sign Up</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.Signup}>
                        <Text>Already have An Account?</Text>
                        <TouchableOpacity onPress={() => navigation.goBack()}>
                            <Text style={styles.Signuptext}> Log In</Text>
                        </TouchableOpacity>
                    </View>
                </>
            )}
        </Formik>
    </View>
);

};

export default SignInForm;

const styles = StyleSheet.create({

button: isValid => ({
    width: 350,
    backgroundColor: isValid ? '#0096F6' : '#9ACAF7',
    borderRadius: 4,
    minHeight: 42,
    alignSelf: 'center',
    marginTop: 20
}),

textStyle: {
    fontWeight: '600',
    fontSize: 20,
    color: '#fff',
    alignSelf: 'center',
    marginTop: 5
},
inputfield: {
    borderRadius: 4,
    padding: 6,
    backgroundColor: '#FAFAFA',
    marginBottom: 10,
    borderWidth: 1
},
wrapper: {
    marginTop: 80
},
Signuptext: {
    color: '#03b1fc'
},
Signup: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: "center",
    marginTop: 50
}

})