Stylesheet for cytoscape does not take affect. Text and graph does not show correctly

I am trying to create a following graph using cytoscape.

https://pathwaycommons.github.io/cytoscape-sbgn-stylesheet/

I have installed cytoscape-sbgn-stylesheet and cytoscape as dependency on my angular app.

Here is the code for the angular app

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import * as cytoscape from 'cytoscape';
import sbgnStylesheet from 'cytoscape-sbgn-stylesheet';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('cy') el: ElementRef;

  ngAfterViewInit() {
    var cy = cytoscape({
      container: document.getElementById('cy'), // container to render in
      stylesheet: sbgnStylesheet(cytoscape),
      elements :[]  //copied from https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet/blob/master/demo.json
      layout: {
        name: 'preset',
      },
    });
  }
}

Html File

But I do not see the actual styles of the graph and I do not see any labels as well. What am I doing wrong?

Here is the picture that I see with no styling of nodes and no labels

The debugging took way too long, but the mistake was quite small, just use this:

style: sbgnStylesheet(cytoscape),

instead of:

stylesheet: sbgnStylesheet(cytoscape),

This is an error on the cytoscape-sbgn-stylesheet repositories README, the Usage passage clearly states to use "stylesheet", though the demo uses "style" as per usual.

Here is the revised version of your stackblitz