"Type instantiation is excessively deep and possibly infinite" Typescript error when used with styled-components css prop

🐛 Bug Report

Using react-spring in conjunction with styled-components css prop in Typescript causes a "Type instantiation is excessively deep and possibly infinite" compilation error.

There are several ways to enable typescript support for the css prop from styled-components in typescript listed here: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 all of which cause this error.

To Reproduce

Steps to reproduce the behavior:

1. Create a typescript react app with npx create-react-app react-spring-css-prop-error --template typescript
2. Add react-spring, styled-components and types: yarn add react-spring styled-components @types/styled-components
3. Add reference to css prop types in App.tsx: /// <reference types="styled-components/cssprop" />
4. Attempt to use animated compenent (e.g. animated.div) in App component

Expected behavior

<animated.div></animated.div> should have no compilation errors

Link to repro

CodeSandbox repro

Environment

• react-spring v9.1.2
• react v17.0.2
• styled-components v5.3.0
• '@types/styled-components` v5.1.9

Start by running the reproduction from the issue in the linked CodeSandbox or a TypeScript React app, focusing on App.tsx and the animated.div usage. Compare the behavior with react-spring v9.1.2, styled-components v5.3.0, and their listed type packages; done means the animated component compiles without the deep-instantiation error.