Add random image on hover using jquery

It is difficult to modify HTML and CSS except for adding class and ID to div. So I'm trying to process it using JS Jquery.

I'd like to show you the GIF randomly when I hover over the image in the div.

When the mouseout, the effect should disappear so that the original image can be seen again.

example // In this example, the goal is to have gif appear randomly.

Here's the code I've been working on.

const ImgLinks = [
"https://media.giphy.com/media/tJ1jipvvMs4r7xuZnI/giphy.gif",
"https://media.giphy.com/media/XFpIo4jKuUrjQHYHeq/giphy.gif",
"https://media.giphy.com/media/uxunn6z4qKrGsND3II/giphy.gif",
"https://media.giphy.com/media/XxRl7rbKSFvXEFoNzv/giphy.gif"
]; //sources are examples.
    
function getRandHoverGif() {
  const index = Math.floor(Math.random() * ImgLinks.length);
  return ImgLinks[index];
}

$("#hover-ani").hover(
  function() {

I don't know how to complete the hover function.

I'd appreciate it if you could help me.