How to use the cornerstone-tools.addToolState function in cornerstone-tools

});

      // Create canvasStack
      let canvasStack = {
        currentImageIdIndex: 0,
        imageIds: allImageIds
      };

      // Enable Inputs
      cornerstoneTools.mouseInput.enable(canvas);
      cornerstoneTools.mouseWheelInput.enable(canvas);
      cornerstoneTools.touchInput.enable(canvas);

      // Set the stack as tool state
      cornerstoneTools.addStackStateManager(canvas, ["stack"]);
      cornerstoneTools.addToolState(canvas, "stack", canvasStack);
      cornerstoneTools.stackScrollWheel.activate(canvas); // Mouse wheel
      cornerstoneTools.scrollIndicator.enable(canvas); // Position indicator

      // Mouse
      cornerstoneTools.wwwc.activate(canvas, 1); // left click
      cornerstoneTools.pan.activate(canvas, 2); // middle click
      cornerstoneTools.zoom.activate(canvas, 4); // right click

      // Touch / Gesture
      cornerstoneTools.wwwcTouchDrag.activate(canvas); // - Drag
      cornerstoneTools.zoomTouchPinch.activate(canvas); // - Pinch
      cornerstoneTools.panMultiTouch.activate(canvas); // - Multi (x2)
    },
    /*

imageIdIndex: imageIndex,
      isStackPrefetchEnabled,
    } = this.props;
    const {
      imageIds: prevStack,
      imageIdIndex: prevImageIndex,
      isStackPrefetchEnabled: prevIsStackPrefetchEnabled,
    } = prevProps;
    const hasStackChanged = !areStringArraysEqual(prevStack, stack);
    const hasImageIndexChanged = imageIndex !== prevImageIndex;
    let updatedState = {};

    if (hasStackChanged) {
      // update stack toolstate
      cornerstoneTools.clearToolState(this.element, 'stack');
      cornerstoneTools.addToolState(this.element, 'stack', {
        imageIds: [...stack],
        currentImageIdIndex: imageIndex,
      });

      // New stack; reset counter
      updatedState['numImagesLoaded'] = 0;
      updatedState['error'] = null; // Reset error on new stack

      try {
        // load + display image
        const imageId = stack[imageIndex];
        const image = await cornerstone.loadAndCacheImage(imageId);

        cornerstone.displayImage(this.element, image);
        cornerstone.reset(this.element);
      } catch (err) {

if (resizeThrottleMs) {
      windowResizeHandler.enable(this.element, resizeThrottleMs);
    }

    // Only after `uuid` is set for enabledElement
    this._setupLoadHandlers();

    try {
      // Setup "Stack State"
      cornerstoneTools.clearToolState(this.element, 'stack');
      cornerstoneTools.addStackStateManager(this.element, [
        'stack',
        'playClip',
        'referenceLines',
      ]);
      cornerstoneTools.addToolState(this.element, 'stack', {
        imageIds: [...imageIds],
        currentImageIdIndex: imageIdIndex,
      });

      // Load first image in stack
      const image = await cornerstone.loadAndCacheImage(imageId);

      // Display
      cornerstone.displayImage(this.element, image);

      if (isStackPrefetchEnabled) {
        _enableStackPrefetching(this.element);
      }

      if (isPlaying) {
        const validFrameRate = Math.max(frameRate, 1);

addNewMeasurement(evt: any) {
    const eventData = evt.detail
    const { element, image } = eventData
    const measurementData: any = this.createNewMeasurement(eventData)

    cornerstoneTools.addToolState(element, this.name, measurementData)
    const { end } = measurementData.handles

    cornerstone.updateImage(element)

    moveNewHandle(
      eventData,
      this.name,
      measurementData,
      end,
      {},
      'mouse',
      () => {
        if (anyHandlesOutsideImage(eventData, measurementData.handles)) {
          // Delete the measurement
          cornerstoneTools.removeToolState(element, this.name, measurementData)
        } else {