How to use with props?

[geohuz]

The examples are all using const value, I'm not sure how to use it with props value? , eg:

const springs = createSpring({
   from: { x: props.x, y: props.y}
...

But then the animted.div doesn't get react anyway, any solution for this issue?

And here is my code snippet for using spring to show an dot animation on positions (passed by props.x, props.y):

function Dot(props) {
  const [local] = splitProps(props, ["x", "y"])

  const styles = createSpring({
    from: {
      x: local.x,
      y: local.y 
    },
    to: {
      x: local.x,
      y: local.y
    }
  })


  
  return (
    <>
      <animated.div
        style={{
          width: `20px`,
          height: `20px`,
          background: '#ff6d6d',
          "border-radius": '50%',
          ...styles()
        }}
      >
        <span>RID:{Math.random()}</span>
      </animated.div> 
    
    </>
  )
}