Animation not working with styled-components

[YuK1Game]

Not animated.
How do you use it in styled-components?

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { useSpring, animated } from "react-spring";

import "./styles.css";

function App() {
  const animatedProps = useSpring({
    from: { number: 0 },
    to: { number: 1 }
  });

  return <DivWithStyled {...animatedProps}>HELLO</DivWithStyled>;
}

const DivWithStyled = styled(animated.div)`
  background-color: #ff0000;
  width: ${props => props.number * 200}px;
`;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This is fixed at 200px.

changed
width: ${props => props.number * 200}px;
to
width: ${props => props.number.interpolate(number => number * 200)}px;

Not applicable.

I want to know how to calculate in styled-components without passing style

Thanks

[jacob-beltran]

I had a similar issue and I found that using styled.div as a parameter to the animated() function seems to work.

const AnimtedStyledDiv = animated(styled.div);