How to use the popmotion.value function in popmotion

key: string,
  to: any
) => {
  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
    // A more explicit API would be nicer
    const { raw } = values.get(key);
    raw.update(to);
    raw.update(to);
  } else {
    values.set(key, {
      raw: value(to, (v: any) => props.elementStyler.set(key, v))
    });
  }
};

this.popupMesh = new THREE.Mesh(
      this.popupGeometry,
      new THREE.MeshBasicMaterial({
        color: theme.color.highlight,
        transparent: true,
      }),
    );

    // Look at camera
    this.popupMesh.lookAt(-1, 1, -1);
    this.textMesh.position.z = 0.01;

    this.popupMesh.add(this.textMesh);
    this.popupObject.add(this.popupMesh);

    this.appearance = value(
      {
        level: this.level,
        opacity: this.opacity,
        textOpacity: this.textOpacity,
        offset: this.offset,
      },
      ({ level, opacity, textOpacity, offset }) => {
        this.popupObject.position.y = LEVEL_HEIGHT * level;
        this.popupObject.position.x = offset;
        this.textMesh.material.opacity = textOpacity;
        this.popupMesh.material.opacity = opacity;
      },
    );
  }

radiate(kill?:boolean){ 
    // Animation
    if(this.identifyBtnRef){

      // kill the animation
      this.identifyBtnRef.animation.seek(0);
      this.identifyBtnRef.animation.stop(this.identifyBtnRef.styler);
      this.identifyBtnRef = null;
      return ;

    } else if(!this.identifyBtnRef && !kill) {

      let btn = styler(this.details.nativeElement.querySelector('#identify-btn'), {});
      let startShadow = btn.get('box-shadow');

      const elementBorder = value({borderColor: '', borderWidth: 0 }, ({ borderColor, borderWidth }) => btn.set({
        boxShadow: `0 0 0 ${borderWidth}px ${borderColor}` 
      }));

      // Convert color to rgb value
      let cc = this.hexToRGB(this.theme.cyan);
      const animation = keyframes({
        values: [
          { borderWidth: 0, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] +', ' + cc.rgb[2] +')' },
          { borderWidth: 30, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] + ', ' + cc.rgb[2] + ', 0)' } 
        ],
        duration:1000,
        loop: Infinity
      }).start(elementBorder);

      this.identifyBtnRef = { animation: animation, originalState: startShadow, styler: elementBorder};

to = (key, options) => ({
		ref: element => {
			element.style.visibility = "hidden";
			element.style.opacity = 0;
			element.style.willChange = "transform";
			this.elementTo[key] = { element, options };
		}
	});

	isPlaying = false;
	timeline = [];

	hiddenProps = () => {};

	progress = value(0, this.seek);

	go = (to, options = {}) => {
		spring({
			from: this.progress.get(),
			to,
			stiffness: 500,
			mass: 1,
			damping: 25,
			...options
		}).start(x => {
			this.progress.update(x);
			this.seek(x);
		});
	};

	seek = t => {

var setValue = function (_a, key, to) {
    var values = _a.values,
        props = _a.props;
    if (values.has(key)) {
        var raw = values.get(key).raw;
        raw.update(to);
        raw.update(to);
    } else {
        values.set(key, {
            raw: value(to, function (v) {
                return props.elementStyler.set(key, v);
            })
        });
    }
};
var explicitlyFlipPose = function (state, nextPose) {

this.hoverMesh.position.y = FILE_HEIGHT / 2 - FILE_OUTLINE;
    this.hoverMesh.position.x = FILE_OUTLINE;
    this.hoverMesh.position.z = FILE_OUTLINE;

    this.shadowMash.castShadow = true;
    this.shadowMash.position.y = 0.1;

    this.fileObject.add(this.shadowMash);
    this.fileObject.add(this.hoverMesh);
    this.fileObject.add(this.fileMesh);

    this.height = value(1, height => {
      this.fileObject.scale.y = height;
    });

    this.position = value(file.position, position => {
      this.fileObject.position.set(
        CELL_HEIGHT * position.row,
        LEVEL_HEIGHT * position.level,
        CELL_WIDTH * position.column,
      );
    });

    this.hoverOpacity = value(0, opacity => {
      this.hoverMesh.material.opacity = opacity;
    });

    this.size = value(1, size => {
      this.fileObject.scale.x = size;
      this.fileObject.scale.z = size;
    });

const createPassiveValue = (
  init: any,
  parent: Value,
  transform: Transformer
) => {
  const raw = value(transform(init));
  parent.raw.subscribe((v: any) => raw.update(transform(v)));

  return { raw };
};

this.fileObject.add(this.hoverMesh);
    this.fileObject.add(this.fileMesh);

    this.height = value(1, height => {
      this.fileObject.scale.y = height;
    });

    this.position = value(file.position, position => {
      this.fileObject.position.set(
        CELL_HEIGHT * position.row,
        LEVEL_HEIGHT * position.level,
        CELL_WIDTH * position.column,
      );
    });

    this.hoverOpacity = value(0, opacity => {
      this.hoverMesh.material.opacity = opacity;
    });

    this.size = value(1, size => {
      this.fileObject.scale.x = size;
      this.fileObject.scale.z = size;
    });

    this.color = value(this.statusColor, color => {
      this.fileMesh.material.color = color;
    });
  }

side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.5,
      }),
    );

    this.textMesh.isAreaName = true;

    this.textMesh.position.x = (CELL_HEIGHT * -0.5) - SECTION_LABEL_SIZE - 0.2 + AREA_HORIZONTAL_PADDING / 2;
    this.textMesh.position.y = 0.001;
    this.textMesh.rotation.x = Math.PI / -2;
    this.textMesh.rotation.z = Math.PI / -2;

    this.areaNameObject.add(this.textMesh);

    this.opacity = value(1, opacity => {
      this.textMesh.material.opacity = opacity * 0.5;

      /*this.areaObject.traverse(object => {
        if (object.isAreaName) {
          object.material.opacity = opacity * 0.5;
        }
      });*/
    });
  }

handleMeasure = measurements => {
    const dimensions = measurements.inner

    if (this.props.width !== null) {
      if (!this.widthValue) {
        this.widthValue = value(
          this.props.width === 'auto'
            ? dimensions.offsetWidth
            : this.props.width,
          this.nodeStyler.set('width')
        )
      } else if (this.props.width === 'auto') {
        this.widthValue.update(dimensions.offsetWidth)
      }
    }

    if (this.props.height !== null) {
      if (!this.heightValue) {
        this.heightValue = value(
          this.props.height === 'auto'
            ? dimensions.offsetHeight
            : this.props.height,