How to write to the serial connection

[arag0re]

import './App.css';
import { useWebSerial } from 'react-webserial-hook';

interface SerialPortFilter {
  usbVendorId?: number;
  usbProductId?: number;
  // Add other properties as needed for your specific filtering criteria
}

function App() {
  const decoder = new TextDecoder();
  const encoder = new TextEncoder();
  const filters: SerialPortFilter = {
    usbVendorId: 1155,
    usbProductId: 22336,
  };
  const serial = useWebSerial({
    onData: (data: Uint8Array) => {
      const decodedData = decoder.decode(data);
      console.log('Received:', decodedData);
    },
  });

  const handleGetPort = async () => {
    await serial.requestPort(filters);
  };

  const handleOpenPort = async () => {
    await serial.openPort();
    if (serial.port) {
      console.log(serial.portInfo(serial.port));
    }
  };

  const startReading = async () => {
    if (!serial.isReading && serial.isOpen) {
      await serial.startReading();
    }
  };

  const stopReading = () => {
    if (serial.isReading && serial.isOpen) {
      serial.stopReading();
    }
  };

  const sendLog = async () => {
    if (serial.isReading) {
      await serial.write(encoder.encode('log'));
      console.log('Sent: log');
    } else {
      console.error('Serial port is not open.');
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => handleGetPort()}>Pair a new port</button>
        <button onClick={() => handleOpenPort()}>Open the selected port</button>
        <button onClick={startReading}>Start reading</button>
        <button onClick={stopReading}>Stop reading</button>
        <button onClick={sendLog}>Send Log</button>
      </header>
    </div>
  );
}

export default App;

i only get error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'port')
    at Object.write (index.js:296:1)
    at sendLog (App.tsx:49:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)