Arduino read serial monitor with NodeJS and output in React web page

My goal

I have an ultrasonic sensor (HC-SR05) which measures the distance to the object it's looking at. It outputs the measurement data to the serial monitor on baud rate 9600. Then I have a React component which fetches the data with a library called SerialPort and puts that data into some state called 'data' . My goal is to display this data on a web page.

What I have tried

I've tried the code in a normal JS file without React, and it was able to output the data from the serial monitor to the console.

The code

My React component looks like this:

import SerialPort from 'serialport';
import Readline from '@serialport/parser-readline';

const port = new SerialPort('/dev/cu.usbmodemFA141', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));
port.on("open", () => {
  console.log('serial port open');
});

const App = () => {

  const [data, setData] = useState('');

  parser.on('data', serialData => {
    setData(serialData)
  });

  return (
    <div className="App">
      <p>Distance: {data}</p>
    </div>
  );
}

Expected and actual result

The expected result was that the component fetched the data from the serial monitor, put it into state, and displayed it on a web page. I used state to re-render the web page when the data updated.

The actual result was that it gave me this error message when I outputted the data to the web page:

TypeError: Error.captureStackTrace is not a function
getFileName
node_modules/bindings/bindings.js:135

  132 | }; // run the 'prepareStackTrace' function above
  133 | 
  134 | 
> 135 | Error.captureStackTrace(dummy);
      | ^  136 | dummy.stack; // cleanup
  137 | 
  138 | Error.prepareStackTrace = origPST;

bindings
node_modules/bindings/bindings.js:59

  56 | }); // Get the module root
  57 | 
  58 | if (!opts.module_root) {
> 59 |   opts.module_root = exports.getRoot(exports.getFileName());
     | ^  60 | } // Ensure the given bindings name ends with .node
  61 | 
  62 | 

./node_modules/@serialport/bindings/lib/linux.js
node_modules/@serialport/bindings/lib/linux.js:1

> 1 | const binding = require('bindings')('bindings.node');
  2 | 
  3 | const AbstractBinding = require('@serialport/binding-abstract');
  4 | 

...

My question

Why does it give me this weird error when it works outside React, and what have I done wrong?

Note: This is an error from React