Whenever I delete a document, my code breaks and shows a blank page

const dispatch = useDispatch();
    const roomId = useSelector(selectRoomId);
    const [roomDetails] = useDocument(
        roomId && db.collection('rooms').doc(roomId)
    )

    const deleteChannel = () => {
        const answer = window.confirm(`Do you reall want to delete ${roomDetails?.data().name}`)
        if (answer) {
            console.log('We can proceed')
            db.collection('rooms').doc(roomId)
            .delete()
        }
    }

On deleting] 2

I guess it shows this as it can not find a document to show but how overpass it and change the document when we delete one?