styled-componentsにpropsを渡すときは`$`を付けよう

styled-components: it looks like an unknown prop "isVisible" 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.)

styled-componentsを使用して作成したコンポーネントにisVisibleというpropを渡した際に上記の警告が出てきました。

コード

Img.tsx

import styled from "styled-components"

const Img = styled.img<{isVisible: boolean}>`
    {(isVisible) =>
        !isVisible &&
        css`
          visibility: hidden;
        `}
`

page.tsx

const Page = () => {
    return(
        <div>
            <Img isVisible={variable} />
        </div>
    )
}

原因

警告メッセージにもある通り、propがDOMに渡されていることで引き起こされているようです。
警告メッセージ末尾にあるようにpropに$マークをつけてあげましょう。

import styled from "styled-components"

+ const Img = styled.img<{$isVisible: boolean}>`
+     ${( isVisible ) =>
+        !$isVisible &&
        css`
          visibility: hidden;
        `}
`

page.tsx

const Page = () => {
    return(
        <div>
+            <Img $isVisible={variable} />
        </div>
    )
}

余談

警告メッセージの中には<StyleSheetManager shouldForwardProp={...}>を使うことも示唆されていますが、今後こちらの使用方法を調べたいと思います。