How to make a smooth slideshow for firefox (or does the transition on background-image not work, how to replace it?)?

Question

css

I'm trying to make an automatic slideshow. There is a div that has the background-image style and the url link to the image changes with an interval. I set the transition, but it does not work in Firefox, but in Google Chrome the animation works.
Having rummaged through the Internet, I found out that the background-image does not animate. How to be?
ps I can’t throw off the code, since I redid it, trying to do it in a different way. and so far without success.
pss there is an idea to display all images at once using the .map() method and set opacity: 1 only for the current image. It turns out all the pictures are transparent, and one is not. But this is shitty, because suddenly there will be under 50 images? Or 100? Take them all out at once ... well, that's it.
psss I also use styled-components, it's not in the tags, for some reason

Answer 1

Render two images and use opacity. Hidden change the url to the next one in the list.

Answer 2