I’m trying to delete a document from fire store one by one based on the ID but the code is not working as expected.

const Charities = () => {


    const [userData, setUserData] = useState([]);

  {/*fetch all Documents Donation from database*/}

    const fetchData = async () => {
        const querySnapshot = await getDocs(collection(db, "Charities"));
        const data = [];
        querySnapshot.forEach((doc) => {
          console.log(doc.id, " => ", doc.data());
          data.push(doc.data());
        });
        setUserData(data);
      };


    useEffect(()=>{
        fetchData()
    },[])
   

         {/*Delete document donation function*/}
    const deleteDocById = async(id)=>{
       try {
        await deleteDoc(doc(db, "Charities", id))
        
        console.log('The document is deleted successfully')
       
    
       } catch (error) {
        console.log(error)

       }
    }


    function renderBody(){
        return(
            <View>
                {userData.map((item)=>(
                    <TouchableOpacity  onPress={()=>deleteDocById(item.id)}>
                        <View  style={style.card} > 
                            <Text style={{
                                fontWeight:'600',
                                color:COLORS.red
                            }}>Delete</Text>
                        </View>
    </TouchableOpacity>
)


)}

I couldn’t figure it out and I do believe the issue is id, the code can’t delete each document separately at all, any help is highly appreciated