Getting Axios Netwrok Error using phpMyAdmin

I’m practicing trying to insert data into a phpmyadmin mysql database using React.
I’m using Axios for posting.
When i try to post data from my formto the database table i get axios network. Tried searching the net for solution but cannot seem to understand where i’m gone wrong.
This is my coding; any guidance will be appreciated on where what needs to be amended:

    import { useState } from "react";
import axios from "axios";
import {useNavigate} from "react-router-dom";
const cors = require('cors');


function AddStudent(){

   // app.use(cors());

    let history = useNavigate();
    const [student, setStudent] = useState({
        first_name:"",
        last_name:"",
        email:""
    })
    const {first_name, last_name, email} = student;

    const handleChange = (e)=>{
setStudent({...student,[e.target.name]: e.target.value})
    }

    const submitForm = async (e) =>{
        e.preventDefault();

        console.log(student)

        await axios.post("http://localhost/renting_website/insert.php", student)
        .then((result) =>{
console.log(result);
if(result.data.status === 'valid'){
    history('/ListStudent')
}
else{
    alert('There is a problem in adding; please check everything')
}
        })
    }
    return(
        <form onSubmit = {e => submitForm(e)}>

        <div className="box_size">
        <div className="row">
            <div className="col-md-12 text-center">
                <h1>Add Student</h1>
            </div>
         </div>

            <div className="row">

            <div className="col-md-6">First Name</div>
            <div className="col-md-6">
                <input type='text' name='first_name' className="form-control" 
                value ={first_name} onChange={e => handleChange(e)}/>
            </div>
            </div>

            <div className="row">
            <div className="col-md-6">Last Name</div>
            <div className="col-md-6">
                <input type='text' name='last_name' className="form-control" 
                 value ={last_name} onChange={e => handleChange(e)}/>
            </div>
            </div>


<div className="row">
            <div className="col-md-6">Email</div>
            <div className="col-md-6">
                <input type='email' name='email' className="form-control" 
                 value ={email} onChange={e => handleChange(e)}/>
            </div>
</div>

     <div className="row">
     <div className="col-md-12">
                <input type='submit' name='submit' className="btn btn-warning"  value="Add_Student"/>
            </div>
         </div>  

         </div>       
       
 </form>     
    )
}

export default AddStudent;

insert.php

    <?php>
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Origin: http://localhost:3000/");

header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: POST");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Headers: Content-Type,
Access-Control-Allow-Headers, Authorization, X-Requsted-With");

include('db-connect.php');

$data = json_decode(file_get_content("php://input"))

$first_name = $data->first_name;
$last_name = $data->last_name;
$email = $data->email;

if($first_name && $last_name && $email){
    $sql = "insert into registration(
        first_name,
        last_name,
        email
        )
    values(
        '$first_name',
        '$last_name',
        '$email'

        )";

        $result = mysqli_connect($con, $sql);
    
        if($result){
            'status' =>'valid'
        );
        echo json_encode($reponse)
        }
        else{
            $reponse=array(
                'status' => 'invalid'
            );
            echo json_encode($reponse)
        }
}
<?>

and the connection.php:

    <?php

$serverName = "localhost";
$userName = "root";
$password = "";
$dbName = "renting";

$con = mysqli_connect($serverName, $userName, $password, $dbName);

?>