when user adds mk its info displays in theirs profile and i need that person can delete it
import { Text, View, Image, ScrollView, Pressable } from 'react-native';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { gStyle } from '../styles/style';
import { firebase } from '../Firebase/firebase';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';
import React, {useState, useEffect} from 'react';
import { useNavigation } from '@react-navigation/native';



export default function Profile() {
    const navigation = useNavigation();
    const options = { day: 'numeric', month: 'long', hour: 'numeric', minute: 'numeric' };
    const [userId, setUserId]=useState(null);
        const [userData, setUserData] = useState(null);
        const [bookedMK, setBookedMK] = useState([]);
        useEffect(()=>{
            const unsubscribe=firebase.auth().onAuthStateChanged((user)=>{
                if(user){
                    setUserId(user.uid);
                }else{
                    setUserId(null);
                }
            });
            return()=>unsubscribe();
        },[])
        useEffect(() => {
                if(userId){
                    const userRef=firebase.database().ref(`users/${userId}`);
                    userRef.on('value', snapshot=>{
                        const data = snapshot.val();
                        setUserData(data);
        });
        const bookedMKRef = firebase.database().ref(`users/${userId}/bookedMK`);
            bookedMKRef.on('value', snapshot => {
                const data = snapshot.val();
                if (data) {
                const mk = Object.values(data);
                setBookedMK([]);
                setBookedMK(mk)
                } else {
                setBookedMK([]);
                }
            });

            // Cleanup function which will remove the listeners when the component is unmounted
            return () => {
                userRef.off();
                bookedMKRef.off();
                
  };
                }
            
        
    },[userId]);
        const handleLogOut = async () => {
            try {
            await firebase.auth().signOut();
            navigation.navigate('Auth');
            } catch (error) {
            console.error(error);
            }
            };

  return (
    <View>
        <ScrollView>
                <Header/>
                <View style={gStyle.main}>
        <View style={gStyle.ProfileBox}>
            <View style={gStyle.ProfileGreeting}>
                <Text style={gStyle.ProfileName}>{userData?.name},</Text>
                <Text style={gStyle.ProfileHello}>Добро пожаловать в{'\n'}личный кабинет</Text>
            </View>
            <View style={gStyle.ProfileBlock}>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Имя</Text>
                    <View style={gStyle.ProfileInfo}>
                        <Text style={gStyle.ProfileValue}>{userData?.name}</Text>
                    </View>
                </View>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Фамилия</Text>
                    <View style={gStyle.ProfileInfo}>
                    <Text style={gStyle.ProfileValue}>{userData?.surname}</Text>
                    </View>
                </View>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Электронная почта</Text>
                    <View style={gStyle.ProfileInfo}>
                    <Text style={gStyle.ProfileValue}>{userData?.email}</Text>
                    </View>
                </View>
                <View style={gStyle.ProfileChain}>
                    <Text style={gStyle.ProfileTitle}>Номер телефона</Text>
                    <View style={gStyle.ProfileInfo}>
                    <Text style={gStyle.ProfileValue}>{userData?.phone}</Text>
                    </View>
                </View>
                <Pressable style={gStyle.logout}
                onPress={handleLogOut}
                >
                    <Text style={gStyle.gobacktxt}>Выйти</Text>
                </Pressable>
            </View>
        </View>
        <View style={gStyle.ProfilePaidMK}>
            <Text style={gStyle.ProfilePaid}>Забронированные{'\n'}мастер-классы</Text>
            <Text style={gStyle.ProfileLine}></Text>
            {bookedMK.map((mk, index)=>(
                <View key={index} style={gStyle.ProfileDetails}>
                <Image source={{uri:mk.image}} style={gStyle.ProfileImg}/>
                <View style={gStyle.ProfileDescription}>
                    <Text style={gStyle.ProfileTitleOfMK}>{mk.name}</Text>
                    <Text style={gStyle.ProfileDate}>{new Date(mk.time?.seconds * 1000).toLocaleTimeString([], options)}</Text>
                    <Text style={gStyle.ProfilePrice}>Цена: {mk.price} Р.</Text>
                </View>
            </View>
            ))}
            
            <Text style={gStyle.ProfileLine}></Text>
        </View>
    </View>
    <Footer/>
    </ScrollView>
            </View>
    
  );
}