How to use the popmotion/reactions/value function in popmotion

const setValue = ({ values, elementStyler }, key, to) => {
  if (values.has(key)) {
    // Here, if we already have the value, we update it twice.
    // Because of stylefire's render batching, this isn't going
    // to actually render twice, but because we're making
    // the value jump a great distance, we want to reset the velocity
    // to 0, rather than something arbitrarily high
    const val = values.get(key).value;
    val.update(to);
    val.update(to);
  } else {
    values.set(key, { value: value(to, v => elementStyler.set(key, v)) });
  }
};

Object.keys(passive).forEach(key => {
      const [valueKey, transform, fromParent] = passive[key];
      const valueToBind = (fromParent && parentValues && parentValues.has(valueKey))
        ? parentValues.get(valueKey).value
        : (values.has(valueKey))
          ? values.get(valueKey).value
          : false;

      if (!valueToBind) return;

      // Maybe make a new value here
      const newValue = value(valueToBind.get(), pipe(transform, styler.set(key)));
      valueToBind.subscribe(newValue);
      values.set({ value: valueToBind });
    });
  }

Object.keys(getDisplayProps(pose)).forEach((key) => {
      if (valueMap.has(key)) return;
  
      const type = valueTypeTests.find(testValueType(pose[key]));
  
      // If there's an initial pose defined, set the value to that, otherwise attempt to read from the element
      const unparsedInitialValue = (initialPose && poses[initialPose] && poses[initialPose][key] !== undefined)
        ? poses[initialPose][key]
        : styler.get(key);
      const initialValue = type ? type.parse(unparsedInitialValue) : unparsedInitialValue;
      let val = value(initialValue);
  
      // Convert to value type
      if (type) val = val.pipe(type.transform);
  
      // Bind styler setter to value updates
      val.subscribe(styler.set(key));
  
      valueMap.set(key, { value: val, type });
    });

// If the user has provided a value, use that
  if (userSetValues && userSetValues[key] !== undefined) {
    thisValue = userSetValues[key];
    type = valueTypeTests.find(testValueType(thisValue.get()));

    // Else create a new value
  } else {
    const initialValue = getInitialValue(
      poses,
      key,
      initialPose,
      styler,
      getTransitionProps()
    );
    type = valueTypeTests.find(testValueType(pose[key]));
    thisValue = value(
      type === number ? type.parse(initialValue) : initialValue
    );
  }

  values.set(key, thisValue);
  thisValue.subscribe((v: any) => styler.set(key, v));
  if (type && type !== number) types.set(key, type);
};

constructor(props) {
    super(props);

    const { v, onStateChange, initialState } = props;

    const isCompositeValue = typeof v !== "number";

    const context = {};
    this.value = value(v);
    this.valueState = initialState;
    this.state = {
      v,
      setRef: ref => {
        if (ref !== null) this.ref = ref;
      },
      velocity: this.value.getVelocity(),
      state: this.valueState,
      setStateTo: onStateChange
        ? Object.keys(onStateChange).reduce((acc, key) => {
            acc[key] = arg => {
              const { state, setStateTo } = this.state;
              const isArgFunction = typeof arg === "function";
              const e = isArgFunction ? undefined : arg;
              const onComplete = isArgFunction ? arg : undefined;

export default function draggable(node, {
  x = true,
  y = true,
  initialX = 0,
  initialY = 0,
  onDrag,
  onDragStart,
  onDragStop
} = {}) {
  const nodeStyler = styler(node);
  const values = {};

  if (x) {
    values.x = value(initialX, nodeStyler.set('x'));
  }

  if (y) {
    values.y = value(initialY, nodeStyler.set('y'));
  }

  let trackPointer;

  function startTracking() {
    trackPointer = pointer({
      x: x ? values.x.get() : 0,
      y: y ? values.y.get() : 0
    }).start((v) => {
      if (x) values.x.update(v.x);
      if (y) values.y.update(v.y);
      if (onDrag) onDrag(values);

) => (key: string) => {
  const [valueKey, transform, fromParent] = passive[key];
  const valueToBind =
    fromParent && ancestorValues.length
      ? getAncestorValue(valueKey, fromParent, ancestorValues)
      : values.has(valueKey) ? values.get(valueKey) : false;

  if (!valueToBind) return;

  const newValue = value(
    valueToBind.get(),
    pipe(transform, (v: any) => styler.set(key, v))
  );
  valueToBind.subscribe(newValue);
  values.set(key, newValue);
};

y = true,
  initialX = 0,
  initialY = 0,
  onDrag,
  onDragStart,
  onDragStop
} = {}) {
  const nodeStyler = styler(node);
  const values = {};

  if (x) {
    values.x = value(initialX, nodeStyler.set('x'));
  }

  if (y) {
    values.y = value(initialY, nodeStyler.set('y'));
  }

  let trackPointer;

  function startTracking() {
    trackPointer = pointer({
      x: x ? values.x.get() : 0,
      y: y ? values.y.get() : 0
    }).start((v) => {
      if (x) values.x.update(v.x);
      if (y) values.y.update(v.y);
      if (onDrag) onDrag(values);
    });

    if (onDragStart) onDragStart(values);
  }