Integrating Strophe with React JS

I am trying to login into my XMPP server using React JS.

I am new to React, so don't know what I am doing wrong, please see if you can help me here.

import './App.css';
var BOSH_SERVICE = 'ws://chat.example.com:7070/ws';
var connection = null;
const Strophe = require("strophe.js").Strophe;
console.log("Strophe is "  ,  Strophe);
Strophe.LogLevel = 0;
connection = new Strophe.Connection(BOSH_SERVICE, { 'keepalive': true });
connection.connect("rajan@example.com","jagruti", onConnect);
console.log("New Connection is " , connection);

function App() {
 
  

  return (
    <div className="App">
     <p>Strophe React Example</p>
    </div>
  );
}

function onConnect(status) {

  if (status == Strophe.Status.CONNECTING) {
      console.log('Synergy is connecting.');
  } else if (status == Strophe.Status.CONNFAIL) {
    console.log('Synergy failed to connect.');

  } else if (status == Strophe.Status.DISCONNECTING) {
    console.log('Synergy is disconnecting.');
  } else if (status == Strophe.Status.DISCONNECTED) {
    console.log('Synergy is disconnected.');

  } else if (status == Strophe.Status.CONNECTED) {
    console.log('Synergy is connected.');
      // set presence
      connection.addHandler(onMessage, null, 'message', null, null, null);
      connection.send($pres().tree());
      connection.addHandler(onPresence, null, "presence");
      connection.sendIQ($iq({ type: "get" }).c("query", { xmlns: Strophe.NS.ROSTER }).tree(), onRoster);
  }
} 

However during the compilation I keep getting this error :

src/App.js
  Line 39:23:  '$pres' is not defined       no-undef
  Line 40:29:  'onPresence' is not defined  no-undef
  Line 41:25:  '$iq' is not defined         no-undef

You need to import those as well.

import  { Strophe, $pres, $iq, onPresence } from 'strophe.js'