Custom hook to listen MotionValue change of Framer X

useMotionValueListen.js

import { useMemo } from 'react'
import { MotionValue } from 'framer'

var __assign = function() {
  __assign =
    Object.assign ||
    function __assign(t) {
      for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i]
        for (var p in s)
          if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]
      }
      return t
    }
  return __assign.apply(this, arguments)
}

const addChild = function(value, config) {
  var child = new MotionValue(value.current, __assign({ parent: this }, config))

  if (!value.children) value.children = new Set()
  value.children.add(child)
  return child
}

function useMotionValueListen(value, listner) {
  return useMemo(() => {
    addChild(value, {
      transformer: (() => {
        return listner
      })(), // using callback here
    })
  })
}

export default useMotionValueListen

use MotionValue.prototype.onChange instead