Can you help me with setting smooth Image transition:

 const [mainImage, setMainImage] = useState(graduates)

    return (<div className='gallery_container'>
        <div className='gallery_main'>
            <div className="gallery_header">Gallery</div>
            <div className="gallery_show"><Image src={mainImage} alt='icon' width={800} height={500} ></Image> </div>
        </div>
        <div className='gallery_choice'>
            <div className='gallery_choice_row'>
                <div>
                    <Image
                        src={graduates2}
                        alt='icon'
                        height={200}
                        width={300}
                        onMouseEnter={() => setMainImage(graduates2)}
                        onMouseLeave={() => setMainImage(graduates)} >
                    </Image>