Switching product image to first gallery image on hover

Hi

I have been trying multiple code snippets and lately been using chatGPT, but I have not yet been able to switch single and archive product image on hover to first gallery image.
As it would be great with a working code snippet to have the effect on hovering to another image.

I am using Full Site Editing with Twenty Twenty Four. The new product editor in the latest version of WooCommerce. I have been exploring this for an update of a WooCommerce site I am building and this is a nice feature to have included.

Thank you!
When I get this working I plan to create a tutorial for it here:
https://easywebdesigntutorials.com/