Get rid of warning when dynamically rendering React styled component

Question

I'm getting the following warning in the browser console:

react_devtools_backend.js:3973 The component styled.div with the id of "sc-dmRaPn" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

However, my CSS positioning is supposed to be dynamic. The height changes every 5 seconds.

Can I do any of the following?

1. Code it properly so it wont show the warning
2. Or, suppress the warning in case 1 is not possible

// Height of the div is dynamically calculated every 5 seconds
private randomHeight = () => {
    return Math.floor(Math.random() * 85);
}

// This method is eventually called by the Render method
private getLeftDiv = () => {
    const height = this.randomHeight();

    const keyFrames = keyframes`
          0% {
              left: -120px;
          }
          5% {
              left: -45px;                
          }
          95% {
              left: -45px;                
          } 
          100% {
              left: -120px;
          }
      `
    const HeadDiv = styled.div`
          position: fixed;
          animation: ${keyFrames} 2s linear;
          animation-timing-function: ease-in ;
          left: -120px;
          top: ${height}%;
          transform: rotate(45deg);
      `
    return HeadDiv;
}

Answer 1

You should declare the HeadDiv styled component separately outside of the current component's render, and use its props to pass the dynamic values to it.

const HeadDiv = styled.div`
    position: fixed;
    animation: ${props => props.keyFrames} 2s linear;
    animation-timing-function: ease-in ;
    left: -120px;
    top: ${props => props.height}%;
    transform: rotate(45deg);
`

You can now pass the dynamic values to HeadDiv's props.

<HeadDiv keyFrames={keyFrames} height={height} />