can anybody tell me how to integrate etherpad-lite-client with reactjs

I am creating a react project, where I need an etherpad real-time text editor, but I don't know to do this, can anybody suggest anything about it.

I got to know about the "etherpad-lite-client" package but still did not have any idea about its applications, how to use it with react. this is the URL https://www.npmjs.com/package/etherpad-lite-client any help is appreciated

Here is the code I used in one of my projects.

const [etherpad, setEtherpad] = useState(null);
useEffect(() => {
setEtherpad(
          api.connect({
            apikey:
              "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            host: process.env.REACT_APP_PAD_API_URL,
            port: process.env.REACT_APP_PAD_PORT,
            ssl: true,
          })
        );
}, []);

Access etherpad API:

etherpad.listAllPads(function (error, data) {

console.log(data);

})