React Spring Animation Issue

Question

I am trying to implement a slideIn animation in my react component. Everytime I click on an icon of my application the component rerender with the animation. How can I avoid this?

import React from 'react';
import { useSpring, animated } from '@react-spring/web';
import { useStateContext } from '../contexts/ContextProvider';
import scifi from '../data/banner-2.jpg';

const Banner = () => {
  const { currentColor } = useStateContext();

  const fadeIn = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    config: { duration: 1000 }, 
  });

  return (
    <animated.div style={fadeIn} className='xl:max-w-[100%] xxs:mt-20 xs:mt-15 sm:mt-4 lg:mt-4 mb-10 lg:px-5'>
      <div className='overflow-hidden relative'>
        <div
          className={`flex transition w-full top-0 left-0 xs:h-[600px] lg:h-full ease-out duration-1000`}
        >
          <img className='lg:rounded-lg object-cover' src={scifi} alt='' />
        </div>
        <div className='absolute top-0 left-0 lg:rounded-lg bg-black/50 w-full h-full'></div>
        <div className='absolute top-0 h-full w-full items-center justify-between flex text-white px-10'>
          <div className='absolute top-0 w-full h-full flex flex-col justify-center text-white px-5'>
            <div>
              <h1 className='xl:text-[70px] xs:text-[30px] md:text-[50px] font-bold'>Find Your New SciFi Book</h1>
              <p className='lg:text-[20px] mb-3 font-bold font-gruppo'>Millions of books on low prices</p>
              <button style={{ backgroundColor: currentColor }} className='lg:text-[20px] cursor-pointer text-sm px-5 rounded-full xs:py-2 lg:py-3'>
                Learn More
              </button>
            </div>
          </div>
        </div>
      </div>
    </animated.div>
  );
};

export default Banner;