Cómo integrar react-intl-tel-input

Hola, soy nuevo en ReactJS y tengo que implementar react-intl-tel-input para tomar números de teléfono de todo el mundo, pero mientras estaba integrándolo, me encontré con algunos problemas. Cuando escribo este código:

<intltelinput containerclassname="intl-tel-input" inputclassname="form-control" name="mobile" placeholder="Enter Your Number" input="" type="tel" value="{this.state.phoneNumber}" onchange="{this.handleChange}"></intltelinput>

No podía acceder a this.handleChange, pero cuando escribo mi código normal así:

<input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required="" onchange="{this.handleChange}">

Podía acceder a this.handleChange y mi código funciona perfectamente, pero no podía tomar el código de país. Si alguien sabe la solución, por favor ayuda. Estoy recibiendo este error:

TypeError: Cannot read properties of null (reading 'phoneNumber')

Este es mi código completo.

Login.js

import React from 'react'
import firebase from './firebase'
import 'firebase/auth';
import "./App.css";
import { getDatabase, ref, child, get } from "firebase/database";
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';


class Login extends React.Component {

  handleChange = (e) => {
    console.log (e)
    const { name, value } = e.target
    this.setState({
      [name]: value

    })
    console.log (value)
    this.setState({ phoneNumber: value }, () => {
      console.log(this.state.phoneNumber);
    });
  }
  configureCaptcha = () =>{
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': (response) => {

        // reCAPTCHA solved, allow signInWithPhoneNumber.

        this.onSignInSubmit();
        console.log("Recaptca varified")
      },
      //  defaultCountry: "IN"
     }
    );
  }
  onSignInSubmit = (e) => {
    e.preventDefault()
    this.configureCaptcha()
    const phoneNumber = this.state.mobile
    console.log(phoneNumber)
    const appVerifier = window.recaptchaVerifier;
    const dbRef = ref(getDatabase());
    get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => {
      if (snapshot.exists()) {
        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)

          .then((confirmationResult) => {

            window.confirmationResult = confirmationResult;

            alert('An OTP has been sent to your registered mobile number')
            localStorage.setItem("Phone_No", phoneNumber)
            console.log(localStorage.getItem('Phone_No'));

          }).catch((error) => {

            console.error(error);
            alert("Oops! Some error occured. Please try again.")
          });
      }
      else {
        alert('Sorry, this mobile number is not registered with us. Please use your registered mobile number.');
      }

    })
  }
  onSubmitOTP = (e) => {
    e.preventDefault()
    const code = this.state.otp
    console.log(code)
    window.confirmationResult.confirm(code).then((result) => {
      // User signed in successfully.
      const Users = result.user;
      console.log(JSON.stringify(Users))
      this.props.history.push("/home");
    }).catch((error) => {
      alert("You have entered wrong code")
    });
  }

  render() {
    return (
      <div classname="Main-header">
        <img src="./55k-logo.png" alt="Company Logo" style="{{" height:="" "80px",="" width:="" "200px"="" }}="">
        <br>
        <div>
          <h2>Login Form</h2>
          Limtless Water. From Unlimited Air.
          <form onsubmit="{this.onSignInSubmit}">
            <div id="sign-in-button"></div>
            {/* <phoneinput */}=""></phoneinput><label>Mobile Number</label> <br>
            {/* for="phoneNumber"  */}
            <intltelinput containerclassname="intl-tel-input" inputclassname="form-control" name="mobile" placeholder="Enter Your Number" input="" type="tel" value="{this.state.phoneNumber}" onchange="{this.handleChange}"></intltelinput>
            {/* <input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required="" onchange="{this.handleChange}"> */}
            <div classname="buttons">
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>

        <div>
          <form onsubmit="{this.onSubmitOTP}">
            <label>Code</label> <br>
            {/* for="code" */}

            <input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required="" onchange="{this.handleChange}">
            <div classname="buttons">
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}
export default Login;