Move spring logic to styled-components

[hansalmeida]

Considering the lib is using mainly hooks, therefore it must be declared inside a component.
Is there a way to declare the animations in a styled-component scope?

Consider the following examples.

We'd usually setup our spring in the component logic scope. What intrigues me is that the web relies on semantics, logic, and styling, so I'd like to couple the styles to the styled-components scope since that's where the lib makes its changes.
In here we have styling both at the top before the return and at the bottom outside the component scope.

interface TestProps {}

export const Test = ({ ...props }: TestProps) => {
  const spring = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return (
    <div {...props}>
      <TextExample style={spring}>Some text</TextExample>
    </div>
  )
}

const TextExample = styled(animated.span)`
  // some css styling...
`

I've played with the library for a while, then I've found components in the "Render-props api" section.
For example:

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <animated.span style={props}>hello</animated.span>}
</Spring>

Considering that's a component I can create a styled-components version of this and pass its props by using .attrs like this

const StyledSpring = styled(Spring).attrs({
  from = { opacity: 0 },
  to = { opacity: 1 },
})

Which allows me to move the props logic to the component scope, but I won't be able to pass a value like children: <animated.span>{children}</animated.span> in order to wrap the children in an animated layer so I could couple the spring and the animated element together, the IDE will only complain about that.
So in order to make it work I still have to pass something like that inside the styled component

interface TestProps {}

export const Test = ({ ...props }: TestProps) => {
  return (
    <div {...props}>
      <StyledSpring>
        {(props) => <animated.span style={props}>Some text</animated.span>}
      </StyledSpring>
    </div>
  )
}

const StyledSpring = styled(Spring).attrs({
  from = { opacity: 0 },
  to = { opacity: 1 },
})`
  // some css properties
`

This solves that problem of moving the spring logic to the scope of the styles but I still need to pass an animated element inside that spring component, and if I want to style it I'd still have to make a second styled-component for that animated element.

Is there a possible way for putting that logic styling section altogether and separate it from the component business rules?