I keep on getting "java.lang.IncompatibleClassChangeError" when I try to use RNFirebase auth method on my react native app - firebase

Question

I keep getting the following error and my app crashes when I try to use the method createUserWithEmailAndPassword or signInWithPhoneNumber from RNFirebase on my react native app. This is currently happening only on the android version of my app.
I did all that was mentioned in the documentation, including enabling Android Device Verification API on my Google Cloud Platform while I was trying to have the signInWithPhoneNumber method work.
I kept on getting the above-mentioned error on Android 7.0 on a Samsung S6 and Huawei Nova 2i.
Below is the code I used:
import { View, Text } from 'react-native'
import React, { useState } from 'react'
import styles from './styles'
import { Button, TextInput } from 'react-native-paper'
import auth from '#react-native-firebase/auth';
function LoginScreen() {
const [emailID, setEmailID] = useState("");
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState(null);
const [code, setCode] = useState('');
async function loginWithEmail (email, password) {
await auth()
.createUserWithEmailAndPassword('jane.doe#example.com', 'SuperSecretPassword!')
.then(() => {
console.log('User account created & signed in!');
})
.catch(error => {
if (error.code === 'auth/email-already-in-use') {
console.log('That email address is already in use!');
}
if (error.code === 'auth/invalid-email') {
console.log('That email address is invalid!');
}
console.error(error);
});
}
return (
<View style={styles.container}>
<View style={styles.textInputContainer}>
<TextInput mode="outlined"
label='Enter your email'
keyboardType="email-address"
value={emailID}
onChangeText={(e) => setEmailID(e)} />
<TextInput mode="outlined"
label='Enter your password'
secureTextEntry
value={password}
onChangeText={(e) => setPassword(e)} />
</View>
<View style={styles.buttonContainers}>
<Button mode="contained" style={styles.signUpButton} disabled={emailID.length > 5 && password.length > 6 ? false : true} onPress={() => loginWithEmail(emailID, password)}>Login</Button>
</View>
</View>
)
}
export default LoginScreen
Any help in pointing out where I went wrong would be of great help. Thank you