How to use the webmidi.supported function in webmidi

require.ensure(['@magenta/music'], async () => {
				try {
					await this.piano.load()
					const { OnsetsAndFrames } = require('@magenta/music')
					this.model = new OnsetsAndFrames('/assets/model')
					await this.model.initialize()
					this.loading = false
					this._enabled = true
					//add a notification
					if (WebMidi.supported){
						document.querySelector('acc-snackbar').setAttribute('message', 'Choose an audio file to transcribe, or play live with a MIDI keyboard.')
					} else {
						document.querySelector('acc-snackbar').setAttribute('message', 'Choose an audio file to transcribe.')
					}
				} catch (e){
					this.loading = false
					this.emit('error', e)
					console.log(e)
					document.querySelector('#error-snack').setAttribute('message', 'Transcription not supported')
				}
			})
		}

constructor(){
		super()

		this.connectedDevices = new Map()

		if (WebMidi.supported){
			this.ready = new Promise((done, error) => {
				WebMidi.enable((e) => {
					if (e){
						error(e)
					}
					WebMidi.inputs.forEach(i => this._addListeners(i))
					WebMidi.addListener('connected', (e) => {
						if (e.port.type === 'input'){
							this._addListeners(e.port)
						}
					})
					WebMidi.addListener('disconnected', (e) => {
						this._removeListeners(e.port)
					})
					done()
				})

useEffect(() => {
    if (!webMidi.supported) {
      setError("Your Device doesn't support the WebMIDI API.");
      return;
    }

    setInputMidis(webMidi.inputs);

    webMidi.addListener("connected", handleMidiDeviceChange);
    webMidi.addListener("disconnected", handleMidiDeviceChange);
    return () => {
      webMidi.removeListener("connected", handleMidiDeviceChange);
      webMidi.removeListener("disconnected", handleMidiDeviceChange);
    };
  }, []);

useEffect(() => {
    const _onNoteStart = e => {
      onNoteStart(e.note.number, e.velocity, true);
    };

    const _onNoteStop = e => {
      onNoteStop(e.note.number, true);
    };

    if (!webMidi.supported) return;

    const input = webMidi.getInputById(midiDevice);

    if (input) {
      input.addListener("noteon", "all", _onNoteStart);
      input.addListener("noteoff", "all", _onNoteStop);
    }
    return () => {
      if (input) {
        input.removeListener("noteon", "all", _onNoteStart);
        input.removeListener("noteoff", "all", _onNoteStop);
      }
    };
  }, [midiDevice, onNoteStart, onNoteStop]);