How to use the screenfull.isFullscreen function in screenfull

public ngOnInit(): void {
        // @ts-ignore
        this.listener = screenfull.on("change", () => {
            // @ts-ignore
            this.isFullscreen = screenfull.isFullscreen;
        });
        // @ts-ignore
        this.isFullscreen = screenfull.isFullscreen;
    }

useEffect(() => {
    if (!isFullscreen && screenfull.enabled) {
      // Checking for `enabled` here, because our props have probably changed
      // _after_ exiting fullscreen mode (see `handleFullscreenChange`).
      // This way we don't double-exit.
      if (screenfull.isFullscreen) {
        screenfull.exit();
      }
    }
  }, [isFullscreen]);

function updateToolbar() {
    // View options
    $('[data-zen-mode]').toggleClass('enabled', zenMode);
    if(Screenfull.enabled) {
      $('[data-fullscreen]').toggleClass('enabled', Screenfull.isFullscreen);
    }
    $('[data-word-count]').toggleClass('enabled', wordCount);

    // Undo/redo
    $('[data-editor="command:undo"]').prop('disabled', !contentEditor.hasUndo());
    $('[data-editor="command:redo"]').prop('disabled', !contentEditor.hasRedo());

    // Formats
    $('[data-editor^="format:"]').each(function() {
      let format = $(this).attr('data-editor').split(':')[1];
      $(this).toggleClass('enabled', contentEditor.hasFormat(format));
    });

    // Lists
    $('[data-editor="command:toggleOrderedList"]').toggleClass('enabled', contentEditor.isOrderedList());
    $('[data-editor="command:toggleUnorderedList"]').toggleClass('enabled', contentEditor.isUnorderedList());

const handleClickFullScreen = (): void => {
    if (screenfull && screenfull.enabled) {
      if (screenfull.isFullscreen) {
        screenfull.exit().catch(err => console.log(err));
      } else {
        screenfull.request().catch(err => console.log(err));
      }
    }
  };

handleScreenfull = () => {
    if (this.fullScreen && Screenfull && !Screenfull.isFullscreen) {
      this.props.onExit();
      Screenfull.off("change", this.handleScreenfull);
    }
  };

screenfull.on('change', () => {
        const fullscreen: boolean = screenfull.isFullscreen;

        this.handleDocumentPos(fullscreen);

        this.emit(Events.FULLSCREEN_CHANGE, {
          fullscreen,
        } as IFullscreenEventData);
      });
    }

constructor(props) {
        super(props);

        this.state = {
            showGlobalConfig: false,
            showImportFile: false,
            showExport: false,
            isFullScreenOn: screenfull.isFullscreen,
        };

        this.toggleGlobalConfig = this.toggleGlobalConfig.bind(this);
        this.toggleExport = this.toggleExport.bind(this);
    }

screenfull.on("change", () => {
        this.setState({
          fullscreen: screenfull.isFullscreen
        });
      });
    }

    this.setState(() => ({ isFullscreen: screenfull.isFullscreen }));
  };

if (!isOpen) return <span>;

		let offsetThumbnails = 0;
		if (showThumbnails) {
			offsetThumbnails = theme.wrapper.gutter.vertical;
		}

		return (
			
				<div width="" style="{{">
					<header>
					{this.renderImages()}
				</header></div>
				{this.renderThumbnails()}
				{this.renderArrowPrev()}
				{this.renderArrowNext()}
				
			
		);
	}
	renderImages () {</span>