the node reducer and edge reducer here are not working for my map

Question

in angular when hovered over certain node the nodes that are not connected to selected node have to be grayed out but its not working for me and i don't see any error either.

the code in sandbox works perfectly fine and i tried to implement this in angular in typescript and the reducer function is not working i tried rendering the function in init but every node grayed out here is my code:

import { Component, ElementRef, OnInit } from '@angular/core';
import Sigma from 'sigma';
import Graph from 'graphology';
import { Coordinates, EdgeDisplayData, NodeDisplayData } from 'sigma/types';
import data from './data.json';

interface State {
  hoveredNode?: string;
  searchQuery: string;
  selectedNode?: string;
  suggestions?: Set<string>;
  hoveredNeighbors?: Set<string>;
}

@Component({
  selector: 'app-home',
  template: `
    <div id="sigma-container" style="height: 400px;"></div>
    <input id="search-input" type="text" placeholder="Search...">
    <datalist id="suggestions"></datalist>
  `,
  styleUrls: ['./home.component.scss']
})
export class MapComponent implements OnInit {
  private graph: Graph;
  private renderer: Sigma | null = null;
  private state: State = {
    searchQuery: "",
    suggestions: new Set<string>()
  };

  constructor(private elementRef: ElementRef) {
    this.graph = new Graph();
  }
  

  ngOnInit() {
    this.graph.import(data);
    this.renderer = new Sigma(this.graph, this.elementRef.nativeElement.querySelector('#sigma-container'));

    this.renderer.on('enterNode', ({ node }) => {
      this.setHoveredNode(node);
    });
    this.renderer.on('leaveNode', () => {
      this.setHoveredNode(undefined);
    });

    

    const searchInput = this.elementRef.nativeElement.querySelector('#search-input') as HTMLInputElement;
    const searchSuggestions = this.elementRef.nativeElement.querySelector('#suggestions') as HTMLDataListElement;

    searchSuggestions.innerHTML = this.graph
      .nodes()
      .map((node) => `<option value="${this.graph.getNodeAttribute(node, 'label')}"></option>`)
      .join('\n');

    searchInput.addEventListener('input', () => {
      this.setSearchQuery(searchInput.value || '');
    });

    searchInput.addEventListener('blur', () => {
      this.setSearchQuery('');
    });
  }
   





  
  setSearchQuery(query: string) {
    this.state.searchQuery = query;

    const searchInput = this.elementRef.nativeElement.querySelector('#search-input') as HTMLInputElement;

    if (searchInput.value !== query) searchInput.value = query;

    if (query) {
      const lcQuery = query.toLowerCase();
      const suggestions = this.graph
        .nodes()
        .map((n) => ({ id: n, label: this.graph.getNodeAttribute(n, 'label') as string }))
        .filter(({ label }) => label.toLowerCase().includes(lcQuery))
        .map(({ id }) => id);

      if (suggestions.length === 1 && suggestions[0] === query) {
        this.state.selectedNode = suggestions[0];
        this.state.suggestions!.clear();

        const nodePosition = this.renderer!.getNodeDisplayData(this.state.selectedNode) as Coordinates;
        this.renderer!.getCamera().animate(nodePosition, {
          duration: 500
        });
      } else {
        this.state.selectedNode = undefined;
        this.state.suggestions = new Set<string>(suggestions);
      }
    } else {
      this.state.selectedNode = undefined;
      this.state.suggestions!.clear();
    }

    this.renderer!.refresh();
  }

  setHoveredNode(node?: string) {
    if (node) {
      this.state.hoveredNode = node;
      this.state.hoveredNeighbors = new Set<string>(this.graph.neighbors(node));
    } else {
      this.state.hoveredNode = undefined;
      this.state.hoveredNeighbors = undefined;
    }

    this.renderer!.refresh();
  }

  nodeReducer = (node: string, data: NodeDisplayData): Partial<NodeDisplayData> => {
    const res: Partial<NodeDisplayData> = { ...data };

    if (this.state.hoveredNeighbors && !this.state.hoveredNeighbors.has(node) && this.state.hoveredNode != node) {
      res.label = '';
      res.color = '#f6f6f6';
    }

    if (this.state.selectedNode === node || (this.state.suggestions && this.state.suggestions.has(node))) {
      res.highlighted = true;
    }

    return res;
  };

  edgeReducer = (edge: string, data: EdgeDisplayData): Partial<EdgeDisplayData> => {
    const res: Partial<EdgeDisplayData> = { ...data };

    if (
      this.state.hoveredNode &&
      (!this.graph.hasExtremity(edge, this.state.hoveredNode) ||
      (this.state.suggestions &&
      (!this.state.suggestions.has(this.graph.source(edge)) || !this.state.suggestions.has(this.graph.target(edge)))))
    ) {
      res.hidden = true;
    }

    return res;
  };
}