How to read data from serial port using browser serial in React

I am new to working with React and Serial Ports. I have been struggling for quite some time.

I need to know how to read data from the serial port using browser-serial. Writing from it has been quite simple so far. But I am struggling with the reading side.

The end goal is that there will be a proximity sensor that triggers the intro page to change to the main page when someone stands in front of it.

I would be most grateful for in advice or feedback I can get.

I do hope that my question makes sense. As it has proven to be difficult for me. And I have not been received very well on this plateform. I hope that you do understand. I am trying to do better.

import logo from './logo.svg';
import './App.css';
import { BrowserSerial } from "browser-serial";

function App() {
const serial = new BrowserSerial();


function connect() {
// alert("You clicked me!");
serial.connect();
}

function on() {
serial.write("1");
}

function off() {
serial.write("0");
}

return (
<div className="App">
<button onClick={connect}>CONNECT</button>
<button onClick={on}>ON</button>
<button onClick={off}>OFF</button>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />

<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
</a>
</header>
</div>
);
}

export default App;