Document library - custom formatting - hover card

I have created a document library in Sharepoint Online.
That library serves as a photo gallery.
The photos have some custom attributes linked to our global term store.

I created a thumbnail column using custom formatting so that even in list view the user immediately sees the contents of the image.

Then I wanted to create custom hover card (since the default file hover card does not show the image content for some strange reasons).

Here’s the code I created:

"customCardProps": {
                "isBeakVisible": true,
                "directionalHint": "rightCenter",
                "openOnEvent": "hover",
                "formatter": {
                    "elmType": "div",
                    "attributes": {
                        "class": "lb_thumbnail"
                    },
                    "style": {
                        "width": "400px",
                        "height": "400px",
                        "display": "flex",
                        "flex-direction": "column",
                        "justify-content": "center",
                        "text-align": "center",
                        "padding": "5px"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "style": {
                                "max-width": "100%",
                                "max-height": "100%",
                                "display": "block"
                            },
                            "attributes": {
                                "src": "@thumbnail.400x400"
                            }
                        }
                    ]
                }
            }

The result looks OK so everything is fine up to this point.

The problem is it randomly does not work.

Some thumbnails react to hover event perfectly, some thumbnails need to hover twice to display the card, sometimes it does not work at all.
The behavior changes when I scroll up or down the library contents. Looks like it has something to do with loading new items and re-rendering the view content as the user interacts with the page.

When I change the the event to "click", it does not work at all.

Anyone experiencing this issue?

Custom column formatting with hover cards looked like a pretty cool feature but it behaves very unreliably.