svg - 反応モーションが補間する初期値を決定する方法

Question

全て：

私は反応モーションにかなり慣れていないので、いつモーションを次のように使用するのだろうかと思います。

<Motion style={{x: spring(10)}}>
  {interpolatingStyle => <div style={interpolatingStyle} />}
</Motion>

次の値を補間するために使用する初期値をどのように知ることができますか? また、配列を補間するにはどうすればよいですか (目的は、その配列を D3.js で使用して SVG パスを生成することです)、次のようにします。

<Motion style={{data: spring([final data])}}>
  {interpolatingStyle => <div d={linegenerator(interpolatingStyle.data)} />}
</Motion>

ありがとう