[2.2.6] Invalid hook warning in LabIcon component

Hi folks,

I am getting stuck at invalid hook warning in LabIcon component. In my project jupyterlab and all of the extensions are my dependencies and I am instantiating a new jupyterlab application in my index file. Everything is working except LabIcon component, it’s a class component but using hooks which is anti-pattern for hooks. When i run jupyter lab from conda it works fine but in my own webapp it is complaining about Invalid hooks.

Any suggestions will be great help thanks.

export class LabIcon {
    constructor() {
        this._initReact();
    }
    _initReact(displayName) {
        const component = React.forwardRef((props = {}, ref) => {
            const _a = Object.assign(Object.assign({}, this._props), props), { className, container, label, title, tag = 'div' } = _a, styleProps = __rest(_a, ["className", "container", "label", "title", "tag"]);
            // set up component state via useState hook
            const [, setId] = React.useState(this._uuid);
            // subscribe to svg replacement via useEffect hook
            React.useEffect(() => {
                const onSvgReplaced = () => {
                    setId(this._uuid);
                };
                this._svgReplaced.connect(onSvgReplaced);
                // specify cleanup callback as hook return
                return () => {
                    this._svgReplaced.disconnect(onSvgReplaced);
                };
            });
            // make it so that tag can be used as a jsx component
            const Tag = tag;
            // ensure that svg html is valid
            if (!(this.svgInnerHTML && this.svgReactAttrs)) {
                // bail if failing silently
                return React.createElement(React.Fragment, null);
            }
            const svgComponent = (React.createElement("svg", Object.assign({}, this.svgReactAttrs, { dangerouslySetInnerHTML: { __html: this.svgInnerHTML }, ref: ref })));
            if (container) {
                Private.initContainer({ container, className, styleProps, title });
                return (React.createElement(React.Fragment, null,
                    svgComponent,
                    label));
            }
            else {
                return (React.createElement(Tag, { className: classes(className, LabIconStyle.styleClass(styleProps)) },
                    svgComponent,
                    label));
            }
        });
        component.displayName = `LabIcon_${displayName}`;
        return component;
    }

There were multiple react instances that caused this issue. Closing this one.