keyframes animation (Invalid value for prop) error with typescript +react + styled component

Question

I am sure that I am doing something wrong, and it is most likely due to typescipt I am getting the following error the code works fine with jsx but when I convert it to tsx I get the following error

Warning: Invalid value for prop animation on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

this is the react element I created

<Gauge src={gauge}
                animation={() => gaugeRotation(firstMove, secondMove, thirdMove, fourthMove)}
                onAnimationEnd={() => {
                    setFirstMove(fourthMove)
                    setSecondMove(fourthMove)
                    setThirdMove(fourthMove)
                }} />

and here is the styled component part, I think I have a mistake passing the props!!!

export const Gauge = styled.img<{animation: () => {}}>`
    width: 30%;
    height: auto;
    position: absolute;
    top: 64%;
    left: 48%;
    animation: ${(props) => props.animation} 3s;
    transform-origin: 10% 54%;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* animation-delay: 2s; */
`;

export const gaugeRotation = (firstMove: number, secondMove: number, thirdMove: number, fourthMove: number) => keyframes`
    0%   {transform: rotate(${firstMove}deg); }
    35% {transform: rotate(${secondMove}deg);}
    50% {transform: rotate(${thirdMove}deg);}
    100% {transform: rotate(${fourthMove}deg);}
`;

everything works fine with jsx but when I convert it to tsx I got that error

Answer 1

I found the solution here

styled component error "it looks like an unknown prop "responsive" is sent through to the DOM, which will likely trigger a React console error."

I downgraded styled-components to version 5:

npm install styled-components@5