Props filter doesn't work with `as`

Here’s a reproduction. Note the console error:

Warning: Invalid value for prop `as` on <a> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 
    at a
    at Link
    at a (webpack-internal:///./node_modules/goober/dist/goober.modern.js:10:1940)
    at IndexPage
    at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:75:5)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:160:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:648:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:784:25)

How it works:

1. Setup shouldForwardProps((prop) => prop !== 'as')
2. Create a goober styled component. (e.g. Div)
3. Use the component, as={FuncComponent} (e.g. Link)

Error: as is still passed through. In this case, to an a.

I have tried other variations as well. For instance, I can explicitly filter !prop.startsWith('$'), and yet props like $hello still pass through to the as component. I checked the filter function logic, and it really is returning false for the bad props.

The strange thing here is that in the code, it really looks like it should be doing the right thing.

[cristianbote]

Also, shouldForwardProp really needs to be moved per styled call 😬 . What do you think? This will be a breaking change, which would call for a major 3 version.

[cristianbote]

This got fixed not sure why it didn’t autoclosed 🤷