Follow the steps to use this library.

Update react script in package.json.

"start": "react-app-rewired start",
"test": "react-app-rewired test",

Create a file at root level with exact name config-overrides.js and paste below code.

const webpack = require('webpack');

module.exports = function override(config) {
    config.ignoreWarnings = [/Failed to parse source map/];
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

Finally paste this code in your desired component eg App.js.

import { useEffect } from "react";
import "./App.css";
import {
  connectWallet,
  disconnectWallet,
  providerHandler,
  providerInfo,
} from "react-web3-login-bcl";

providerInfo();

function App() {
  useEffect(() => {
    providerHandler();
    disconnectWallet();
  }, []);

  return (
    <>
      <button type="button" onClick={connectWallet}>
        Connect
      </button>
    </>
  );
}

export default App;