[ERROR] Warning: React does not recognize the `sidebarOpen` prop on a DOM element

styled-compnent에 props를 전달하여 삼항연산자를 통해 사이드바가 오픈되었을 때와 닫혔을 때 스타일을 다르게 하고 싶었다.
sidebarOpen의 상태에 따라 다른 애니메이션을 주는 코드를 작성하였는데

위와 같은 오류와 경고가 발생하였는데 구글 검색을 통해 에러의 원인을 찾았다.
공식문서를 살표보면

transient-props라는 개념이 나온다.

스타일이 지정된 구성 요소에서 사용하도록 의도된 prop이 React 노드로 전달되거나 DOM요소로 렌더링되는 것을 방지하려면 prop이름 앞에 달러기호($)를 붙여라.

$접두사를 사용하여 transient props를 만들면 DOM요소로 전달되지 않고 스타일을 위한 props넘김이 가능하다 !

<S.SideMenuBackground
        sidebarOpen={sidebarOpen}
        onClick={handleCloseSidebar}
      />
      
 export const SideMenuBackground = styled.div<{ $sidebarOpen: boolean }>`
  animation: ${({ $sidebarOpen }) => ($sidebarOpen ? blurIn : blurOut)} 0.3s
    ease-in-out forwards;
`;