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;
}