Как сделать анимацию на path в d3.js?
 

Подскажите, пожалуйста, как сделать анимацию на path в d3.js
https://codepen.io/gsdev99/pen/GRgRWLW
В коде видны попытки добавлять transition, но к необходимому результату это не привело.

useEffect(() => {
    setState((prevState) => ({
      ...prevState,
      chartPoints: chartPoints
    }))
  }, [])
  
  chartPoints.forEach((d) => {
    d.date = new Date(d.date)
    d.value = Number(d.value)
  })

для реакта эти изменения не доступны,

useEffect(() => {
    setState((prevState) => ({
      ...prevState,
      chartPoints: chartPoints.forEach((d) => {
    d.date = new Date(d.date)
    d.value = Number(d.value)
  })
    }))
  }, [])

хотя бы должно быть так

draw тогда нужно повесить на эффект

React.useEffect(
() => {
draw()
}
,
[draw, state.chartPoints]
)

потому что если изменились state.chartPoints вызваться draw, так же надо draw завернуть в React.useCallback... в общем это подход из серии поменять стиль через document.querySelector )) в реакте...

вообще для библиотек там всяких пишут bindings надо найти "react d3 bindings"..