React: Cannot read properties of undefined (reading 'id') - reactjs

Question

I have created react gallery which allows user to upload an image into firebase storage, then firestore reads its urls and displays in my app.
I basicaly loop through an array of images (named docs) created and exported in other file. Now I want to add possibility to delete the file so before I remove it from firebase storage I want to remove the document from firestore database.
Now, I want function deleteDocument to remove document by method deleteDoc provided by firebase.
When I fire it I get an error: Cannot read properties of undefined (reading 'id').
Seems like id is undefined but when I look into Dev Tools I clearly see there is id field (example: id: "REqWGEahJF2iqsdROM"). I have tried to get into component I want to delete by ref.current and ref.doc.id. I've been working on it for last few days and really I got no idea how to fix it :/
When I replace compRef.doc.id with compRef.current I got this error: Uncaught TypeError: n.indexOf is not a function.
import React from "react";
import { projectFirestore } from "../../firebase/config";
import { deleteDoc, doc } from 'firebase/firestore';
import useFirestore from "../../hooks/useFirestore";
const ImageGrid = ({ setSelectedImg }) => {
const compRef = React.useRef();
const { docs } = useFirestore('images');
const deleteDocument = () => {
console.log(compRef);
const docRef = doc(projectFirestore, 'images', compRef.current)
deleteDoc(docRef).then(() => {
console.log(`removed doc ${compRef.current}`)
})
}
return (
<div className="img-grid">
{ docs && docs.map(doc => (
<div className="img-wrap" key={doc.id}
ref={node => compRef.current = node}
onClick={() => setSelectedImg(doc.url)}>
<img src={doc.url} alt="uploaded img" />
<button className="delete"
onClick={deleteDocument}
>Delete</button>
<div>
))}
</div>)
}
Does anyone have an idea how to solve this?
EDIT:
answer to console.log object compRef
current: div.img-wrap
__reactFiber$ars7zzthpl: FiberNode {tag: 5, key: null, elementType:
'div', type: 'div', stateNode: div.img-wrap, …}
__reactProps$ars7zzthpl:
children: (2) [{…}, {…}]
className: "img-wrap"
onClick: () => setSelectedImg(doc.url)
...
id: ""
I think you dont need more properties of that object.
Now I see id field is empty, so is key. Still cannot solve this :(
When I console log docs array (compRef is reference to docs) then I see:
id: "REqWGEahJFQh2iqsdROM"