How to use the react-spring/hooks.animated.div function in react-spring

r="5"
            stroke={isBroken ? COLORS.white : COLORS.yellow[300]}
            fill={isBroken ? COLORS.red[500] : COLORS.gray[1000]}
            strokeWidth={2}
          />
        
      
    
  );
};

const Wrapper = styled.div`
  position: relative;
`;

const GridWrapper = styled(animated.div)`
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: bottom center;
  transform-style: preserve-3d;
`;

const Mountain = styled(animated.svg)`
  position: absolute;

const InnerWrapper = styled.div`
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const TruckWrapper = styled(animated.div)`
  position: relative;
`;

const FireWrapper = styled.div`
  position: absolute;
  left: 0;
  bottom: -3px;
  transform: translate(-42px, 5px) rotate(270deg) scale(0.75, 0.75);
  transform-origin: center center;
`;

export default FlyingTruckDemo;

flex: 1;
`;

const FirstDoor = styled(Door)`
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${COLORS.gray[500]};
  text-transform: uppercase;
`;
const LastDoor = styled(Door)`
  display: flex;
  border-top-width: 0px;
`;

const Children = styled(animated.div)`
  position: relative;
  z-index: 1;
`;

const ChildrenShadow = styled(animated.div)`
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  background: #000;
  pointer-events: none;
`;

import styled from 'styled-components';
import { animated } from 'react-spring/hooks';
import { defaultTheme } from '../../../styles/themes/defaultTheme';
import { themeBackgroundColor } from '../../../styles/sharedTheme';
import { ISelectableProps } from '../ISelectable';

export const SelectableWrapper = styled(animated.div)`
	width: ${(props) => (props.checkedAmount ? props.checkedAmount : '0')};
	height: 3px;
	bottom: 0px;
	right: ${(props) => (props.checkeddirection === 'right' || props.checkeddirection === 'center' ? '0' : 'auto')};
	left: ${(props) => (props.checkeddirection === 'left' || props.checkeddirection === 'center' ? '0' : 'auto')};
	z-index: 2;
	position: absolute;
	margin:auto;
	${themeBackgroundColor}
`;

SelectableWrapper.defaultProps = {
	kind: 'primary',
	checkeddirection: defaultTheme.defaultCheckedDirection
};

const Doors = styled.div`
  position: absolute;
  display: block;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  border-radius: ${RADIUS};
  flex-direction: ${props =>
    props.orientation === 'horizontal' ? 'column' : 'row'};
`;

const Door = styled(animated.div)`
  background: ${COLORS.gray[100]};
  border: 1px solid ${COLORS.gray[500]};
  flex: 1;
`;

const FirstDoor = styled(Door)`
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${COLORS.gray[500]};
  text-transform: uppercase;
`;
const LastDoor = styled(Door)`
  display: flex;
  border-top-width: 0px;
`;

opacity: 0;
`;

const AestheticRadio = styled.div`
  position: relative;
  z-index: 1;
`;

const OuterRing = styled.div`
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 2px solid;
`;

const CheckedCircle = styled(animated.div)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 100%;
  background: ${COLORS.blue[500]};
`;

export default RadioButton;

display: flex;

  &:disabled {
    cursor: not-allowed;
  }
`;

const VisualizationWrapper = styled.div`
  flex: 1;
`;

const Swatches = styled.div`
  position: relative;
`;

const SwatchWrapper = styled(animated.div)`
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
`;

const Controls = styled.div`
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: ${COLORS.gray[1000]};
`;

const Gradient = styled.div`

style={{
          width: marginSize,
          backgroundColor,
        }}
      />
      
    
  );
};

const Margin = styled(animated.div)`
  position: absolute;
  z-index: 2;
`;

const TopMargin = styled(Margin)`
  top: 0;
  left: 0;
  right: 0;
  transform-origin: top center;
`;
const LeftMargin = styled(Margin)`
  top: 0;
  left: 0;
  bottom: 0;
  transform-origin: center left;
`;

outline: 0;
  border: none;
  background: transparent;
  display: flex;
  align-self: flex-end;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-bottom: 14px;
  color: rgba(255, 255, 255, 0.5);
  :hover {
    color: rgba(255, 255, 255, 0.6);
  }
`

export const Life = styled(animated.div)`
  position: absolute;
  bottom: ${props => (props.top ? '10px' : '0')};
  left: 0px;
  width: auto;
  background-image: linear-gradient(130deg, #00b4e6, #00f0e0);
  height: 5px;
`