I am trying to fade in content as I load it on to a View Component

I got an array of properties and every certain time I add a counter so it keeps chaging between properties.

const [counter, setCounter] = useState<number>(0)

useEffect(() => {
  const interval = setInterval(() => {
    setCounter(counter => counter + 1)
  }, time * 1000)

  return () => clearInterval(interval)
}, [properties])

This works well in changing the property but I would like to add a fade in animation that triggers everytime the counter variable changes.

return (
   <View property={properties[counter]} />
)

I tried to add CSSTrasition on the view component but it only triggers the first time and it does not fade anymore.

How can I fade in everytime there is a change of property.

Is CSSTransition the right approach? I dont want to click to fade, I just want a brief fade transition between properties