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

※ <Version> "react": "^18.2.0", "styled-components": "^6.1.1"

styled-components: it looks like an unknown prop "..." is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.)

스타일드 컴포넌트: 알 수 없는 prop "..."가 DOM으로 전송되고 있는 것처럼 보이며, 이는 React 콘솔 오류를 트리거할 수 있습니다. 알 수 없는 프로퍼티를 자동으로 필터링하려면 <StyleSheetManager shouldForwardProp={...}>를 통해 해당 동작을 선택하거나(@emotion/is-prop-valid 같은 API 연결) 일시적인 프로퍼티(자동 필터링을 위한 $ 접두사) 사용을 고려할 수 있습니다.

해당 props가 기본 태그/구성 요소 props의 일부가 아닌 사용자 정의 custom props를 사용하여 DOM요소를 렌더링하려고 할 때 발생하는 오류이다.

해결방법

index.js에서 StyleSheetManager로 App 컴포넌트를 감싸준 다음 shouldForwardProp속성에 true를 반환하도록 추가해주었다. 임시 props처럼 동작하게 해 준다.

    <React.StrictMode>
            <StyleSheetManager shouldForwardProp={() => true}>
                <App />
            </StyleSheetManager>
    </React.StrictMode>

---

참조1 : https://legacy.reactjs.org/warnings/unknown-prop.html
참조2 : https://github.com/styled-components/styled-components/releases/tag/v6.0.0
참조3 : https://styled-components.com/docs/api#stylesheetmanager