App.tsx

import React from "react"
import { useSpring, animated } from "react-spring"

const App = () => {
  const [isExpanded, setExpanded] = React.useState(false);

  const style = useSpring({
    width: isExpanded ? "100vw" : "200px",
    height: isExpanded ? "100vh" : "200px",
    borderRadius: isExpanded ? "0px" : "10px",
  });

  return (
    <animated.div
      className="box"
      style={style}
      onClick={() => setExpanded(!isExpanded)}
    >
      I am a box
    </animated.div>
  );
};