React Native & Firestore: Property 'auth' does not exist on type 'typeof / error object unknown

I am using typescript along with Firebase and React Native.

I was working on my signup screen and I imported firebase like this:

import * as firebase from 'firebase/app';import 'firebase/auth';

Then on my onSignUp function I got this:

 onSignUp = async () => {    if (this.state.email && this.state.password) {      try {        const response = await firebase          .auth()          .createUserWithEmailAndPassword(            this.state.email,            this.state.password,          );      } catch (error) {        if (error.code == 'auth/email-already-in-use') {          Alert.alert('Signup Error', 'User already exist!', [            {              text: 'Ok',            },          ]);        }      }    }  };

Visual Studio code is complaining about the auth on await firebase.auth() it says Property 'auth' does not exist on type 'typeof.

Additionally, its also complaining on the error.code and it saying Object is of type 'unknown'.ts(2571) not sure what it meant and been stuck for awhile.

Here's my complete code:

export interface Props {}interface State {  email: string;  password: any;  isLoading: boolean;}export default class LoginScreen extends React.Component<Props, State> {  constructor(props: Props) {    super(props);    this.state = {      email: '',      password: '',      isLoading: false,    };  }  onLogin = () => {};  onSignUp = async () => {    if (this.state.email && this.state.password) {      try {        const response = await firebase          .auth()          .createUserWithEmailAndPassword(            this.state.email,            this.state.password,          );      } catch (error) {        if (error.code == 'auth/email-already-in-use') {          Alert.alert('Signup Error', 'User already exist!', [            {              text: 'Ok',            },          ]);        }      }    }  };  render() {    return (<View style={styles.container}><TextInput          placeholder="Your Email"          keyboardType="email-address"          autoCorrect={false}          style={styles.txtInput}          onChangeText={email => this.setState(email)}        /><TextInput          placeholder="Your Password"          secureTextEntry          style={styles.txtInput}          onChangeText={password => this.setState(password)}        /><TouchableOpacity style={styles.btnLog} onPress={this.onLogin}><Text style={styles.logTxt}>Login</Text></TouchableOpacity></View>    );  }}

Any idea what's causing the firebase.auth() and error.code? Please help.

UPDATE: I tried following the v9 guide using async await but still not working:

import {initializeApp} from 'firebase/app';import {firebaseConfig} from '../config/config';import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth';export interface Props {}interface State {  email: string;  password: any;  isLoading: boolean;}export default class LoginScreen extends React.Component<Props, State> {  constructor(props: Props) {    super(props);    this.state = {      email: '',      password: '',      isLoading: false,    };    this.initialFirebase();  }  initialFirebase = () => {    initializeApp(firebaseConfig);  };  auth = getAuth(this.initialFirebase);  onLogin = () => {};  onSignUp = async () => {    if (this.state.email && this.state.password) {      try {        const response = await createUserWithEmailAndPassword(          auth,          this.state.email,          this.state.password,        );      } catch (error) {        if (error.code == 'auth/email-already-in-use') {          Alert.alert('Signup Error', 'User already exist!', [            {              text: 'Ok',            },          ]);        }      }    }  };