i want to integrate backend codes i.e. rest api to front end reactjs code

Question

i want to integrate backend codes i.e. rest api to front end reactjs code. i have tried usingaxios . pls help i am new to react.

the code is below:

import React, { useState } from "react";
import "./Register.css";
import { useHistory } from "react-router-dom";
import axios from "axios";

function Register() {
  const history = useHistory();

  const [data, setData] = useState({
    name: "",
    phone: "",
    password: "",
    confirmpassword: "",
  });

  const [nameErr, setNameErr] = useState({});
  const [phoneErr, setPhoneErr] = useState({});
  const [passwordErr, setPasswordErr] = useState({});
  const [confirmPasswordErr, setConfirmPasswordErr] = useState({});

  const InputEvent = (event) => {
    const { name, value } = event.target;

    setData((preVal) => {
      return {
        ...preVal,
        [name]: value,
      };
    });
  };

  const formSubmit = (e) => {
    e.preventDefault();
    const isValid = formValidation();
    if (isValid) {
      //if form is valid, route
      history.push("/myvehicles");
    }
  };

  const formValidation = () => {
    const nameErr = {};
    const phoneErr = {};
    const passwordErr = {};
    const confirmPasswordErr = {};
    let isValid = true;

    if (data.name.trim().length < 4) {
      nameErr.nameShort = "name is short";
      isValid = false;
    }

    if (data.phone.trim().length < 10) {
      phoneErr.phoneerror = "phone number must have 10 digits";
    }

    if (data.password.trim().length < 4) {
      passwordErr.passwordShort = "password must be 8 characters";
      isValid = false;
    }

    if (!(data.confirmpassword === data.password)) {
      confirmPasswordErr.confirmPasswordError = "password must be same";
      isValid = false;
    }

    setNameErr(nameErr);
    setPhoneErr(phoneErr);
    setPasswordErr(passwordErr);
    setConfirmPasswordErr(confirmPasswordErr);
    return isValid;
  };

  axios.post(`https://localhost:5000/`, { InputEvent }).then((res) => {
    console.log(res);
    console.log(res.data);
  });

  return (
    <div className="signup__container">
      <div className="signup__containerInfo">
        <h1 className="h1__swari">सवारी नविकरणको लागि</h1>
        <hr />
      </div>

      <form className="register__form" onSubmit={formSubmit}>
        <h5 className="h5__form"> Name</h5>
        <input
          type="text"
          placeholder="पुरा नाम लेख्नुहोस्"
          name="name"
          value={data.name}
          onChange={InputEvent}
        />

        {Object.keys(nameErr).map((key) => {
          return (
            <div className="error__msg" style={{ color: "red" }}>
              {nameErr[key]}
            </div>
          );
        })}
        <h5 className="h5__form"> phone </h5>
        <input
          type="text"
          placeholder="फोन लेख्नुहोस्"
          name="phone"
          value={data.phone}
          onChange={InputEvent}
        />

        {Object.keys(phoneErr).map((key) => {
          return (
            <div className="error__msg" style={{ color: "red" }}>
              {phoneErr[key]}
            </div>
          );
        })}
        <h5 className="h5__form"> Password </h5>
        <input
          type="Password"
          placeholder="पासवर्ड लेख्नुहोस्s"
          name="password"
          value={data.password}
          onChange={InputEvent}
        />

        {Object.keys(passwordErr).map((key) => {
          return (
            <div className="error__msg" style={{ color: "red" }}>
              {passwordErr[key]}
            </div>
          );
        })}
        <h5 className="h5__form"> Confirm Password </h5>
        <input
          type="Password"
          placeholder="पुन: पासवर्ड लेख्नुहोस्"
          name="confirmpassword"
          value={data.confirmpassword}
          onChange={InputEvent}
        />

        {Object.keys(confirmPasswordErr).map((key) => {
          return (
            <div className="error__msg" style={{ color: "red" }}>
              {confirmPasswordErr[key]}
            </div>
          );
        })}
        <p>
          <button type="submit" className="signup__registerButton">
            Register Now
          </button>
        </p>
      </form>
    </div>
  );
}

export default Register;

the code is as above . i want the register auth which is token based and wanted to call from the backend and the also send form values to the backend how can i do it?