Animated GIF not animating in browser

Question

I have an animated GIF which was working fine in development, but not after build. I have tried it in chrome and edge. I have a static placeholder which is displayed fine and on mouseEnter it gets replaced by the animated file. It does do this as the src has the correct file, but it does not animate. I can see that the correct image is loaded as it is slightly different to its static placeholder. The files are static files, in the public folder. Is there something I need to add in the config? I am not sure where to start trouble shooting on this as I am quite new to this.

This is the component :

import React, { useState } from 'react'
import Image from 'next/image'
import styles from '../../styles/Interest.module.scss'

type props = {
    gifRef: React.LegacyRef<HTMLDivElement>
    interest: {
        title: string
        gif: string
        gif_static: string
        text: string
        bg: string
        id: number
    }
}

export const Interest = ({ interest, gifRef }: props) => {
    const {title, gif, gif_static, text, bg} = interest
    const [img, setImg] = useState<string>(gif_static) 

  return (
    <div    className={ styles.interest } 
            style={{backgroundColor: bg}}
            onMouseEnter={ () => setImg(gif) }
            onMouseLeave={ () => setImg(gif_static)}
            ref={interest.id === 1 ? gifRef : null}
    >
        <h2>{ title }</h2>
        { gif ? <Image src={ img } width={500} height={500} alt={ interest.title }/> : null }
        <p>{ text }</p>
    </div>
  )
}

Rest of code is here: https://github.com/Bponthemove/my-new-portfolio