Login with web API in React js

Question

This is my login form i want to auth login with web api url.i am done web api login,the

only think I want how can i call web api here

import React, { useState } from 'react';
import {useFormik, yupToFormErrors} from 'formik';
import * as yup from 'yup';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import showPwdImg from './show-password.svg';
import hidePwdImg from './hide-password.svg';
const Login =() =>{
  const [isRevealPwd, setIsRevealPwd] = useState(false);
const formik = useFormik({
initialValues:{
name:"",
password:""

},
validationSchema:yup.object({
name:yup.string()
.required('UserName is required')
.strict()
.trim()
.min(5)
.max(15,'Maximum 15 character') ,

password:yup.string()
.required('Password is required')
.min(6)
.max(15,'Maximum 10 character')
}),

onSubmit:(userInputData)=>{
console.log(userInputData);
}
})
return(

<div className="container mt-4">
<div>

   <form autoComplete="off" onSubmit={formik.handleSubmit}>
      <div className="form-group">
      <header className="head-form">
            <h2>Log In</h2>

         </header>

         <div className="input-icons">
         <i className="fa fa-user icon"></i>
         <input className="form-control" placeholder="Username" type="text" name="name" id="login"onChange={formik.handleChange} value={formik.values.name}/>
         </div>
         {formik.errors.name ?
         <div className="text-danger">{formik.errors.name}</div>
         :null
         }
      </div>

      <div className="form-group ">
         <div className="input-icons">
         <i className="fa fa-key"></i>
         <input className="form-control" placeholder="Password" id="loginpwd"  name="password" onChange={formik.handleChange}  type={isRevealPwd ? "text" : "password"}
          value={formik.values.password}
         />
         <img
          title={isRevealPwd ? "Show password" : "Hide password"}
          src={isRevealPwd ? showPwdImg : hidePwdImg}
          onClick={() => setIsRevealPwd(prevState => !prevState)}
        />

         {formik.errors.password ?
         <div className="text-danger">{formik.errors.password}</div>
         :null
         }
          </div>
      </div>
      <button className="log-in" type="text">Submit</button>
   </form>
</div>

</div>
)
}
export default Login;