Not able to style nested animations with keyframes with styled-components

I am creating the animation for an Image with a customized animation in styled-component with conditional styling. But it gives me the error saying that "Uncaught Error: It seems you are interpolating a keyframe declaration (bZfjDs) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly." I did it with the v4 syntax but it still does not work. Is there a way to do it?

I've tried follow the syntax but it still won't work.

First I did:

animation: ${props => (props.animating === 'true' ? `${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;

where fadeInSlide is my own keyframes, then I tried doing:

const fadeInAnimation = css`
    animation: ${fadeInSlide} 1s ease-in-out infinite forwards;
  `
const BlockImage = styled(Image)`
  animation: ${props => (props.animated === 'true' ? `${fadeInAnimation}` : '')} ;
`

but this also gives me the error.