Not find firebase import

This is my firebase.js

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: 'AIzaSyCUndICAUxUT3n_Q19F05BazSpLOkr2d1c',
    authDomain: 'chat-e7246.firebaseapp.com',
    projectId: 'chat-e7246',
    storageBucket: 'chat-e7246.appspot.com',
    messagingSenderId: '28357679434',
    appId: '1:28357679434:web:58376c850f47e39fb689b3',
    measurementId: 'G-VE6BZN6595',
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const storage = getStorage();
export const db = getFirestore();

When i try to use it to create DB in user.jsx file

import { auth, db } from '~/firebase';
const onSubmit = (data) => {
        setFormData({
            email: data.email,
            fullname: data.fullname,
            username: data.username,
            password: data.password,
            confirmPassword: data.confirmPassword,
        });
    };

    const registerUser = async () => {
        try {
            const { user } = await auth.createUserWithEmailAndPassword(formData.email, formData.password);
            await db.collection('users').doc(user.uid).set(formData);

            return user;
        } catch (error) {
            console.error('Error registering user:', error);
            throw error;
        }
    };

The error comes like this : Error registering user: TypeError: firebase__WEBPACK_IMPORTED_MODULE_6_.auth.createUserWithEmailAndPassword is not a function

Your configuration file firebase.js isn't right. You should pass app variable as argument to getAuth, getStorage, and getFirestore function...
Like this:

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const storage = getStorage(app);
export const db = getFirestore(app);

Yeah, after I follow the guide and pass app variable but still error. Then I fix it by doing this :

 const onSubmit = (data) => {
        setFormData({
            email: data.email,
            fullname: data.fullname,
            username: data.username,
            password: data.password,
            confirmPassword: data.confirmPassword,
        });
    };

    const registerUser = async () => {
        try {
            const { user } = await createUserWithEmailAndPassword(auth, formData.email, formData.password);
            await setDoc(doc(db, 'users', user.uid), {
                username: formData.username,
                password: formData.password,
                email: formData.email,
            });

            return user;
        } catch (error) {
            console.error('Error registering user:', error);
            throw error;
        }
    };

And this is my firebase.js

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const storage = getStorage(app);
export const db = getFirestore(app);