React Js With Laravel API User Register 419 Error

I am new to react js and am trying to register a new user into my database with my react js frontend using Laravel API and I am getting this error

Request failed with status code 419
AxiosError: Request failed with status code 419
    at settle (http://localhost:3000/static/js/bundle.js:80917:12)
    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:79599:66)

My UserAPIController.php laravel file

<?php

namespace App\Http\Controllers\API;

use App\Models\User;
use Validator;
use Illuminate\Support\Facades\Hash;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class ApiV1UserController extends Controller
{
    public function register(Request $request){
        $validator = Validator::make($request->all(),[
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'mobile' => ['required', 'string', 'min:10'],
            'password' => ['required', 'string', 'min:8']
            // 'password' => ['required', 'string', 'min:8', 'confirmed']
        ]);
        if($validator->fails()){
            return response()->json(['validation_errors'=>$validator->messages()],422);
        }else{
            $user = User::create([
                'name'=>$request->name,
                'email'=>$request->email,
                'mobile'=>$request->mobile,
                'password'=>Hash::make($request->password),
            ]);
            $token = $user->createToken($user->email.'_Token')->plainTextToken;

            return response()->json([
                "status"=>true,
                "username"=>$user->name,
                "token"=>$token,
                "message"=>"User Registered Succesfully!"
            ],201);
        }
    }
}

My Register.js react file

import React, { useState, useRef } from "react";
import { useNavigate, BrowserRouter as Router } from "react-router-dom";
import { Routes, Route } from "react-router";
import { Link } from "react-router-dom";
import axios from "axios";
import swal from "sweetalert";
import { aslInterpreting, snowflakeO } from "fontawesome";

function Register() {
  const navigate = useNavigate();

  const [registerInput, setRegister] = useState({
    name: "",
    email: "",
    mobile: "",
    password: "",
    error_list: [],
  });

  const handleInput = (e) => {
    e.persist();
    setRegister({ ...registerInput, [e.target.name]: e.target.value });
  };

  const registerSubmit = (e) => {
    e.preventDefault();
    const data = {
      name: registerInput.name,
      email: registerInput.email,
      mobile: registerInput.mobile,
      password: registerInput.password,
    };

    axios.get("/sanctum/csrf-cookie").then((response) => {
      axios.post(`/api/register`, data).then((res) => {
        if (res.data.status === 201) {
          localStorage.setItem("auth_token", res.data.token);
          localStorage.setItem("auth_name", res.data.username);
          swal("Success", res.data.message, "success");
          navigate("/");
        } else {
          setRegister({
            ...registerInput,
            error_list: res.data.validation_errors,
          });
        }
      });
    });
  };

  return (
    <section className="login-box">
      <div className="container">
        <div className="row">
          <div className="col-lg-3"></div>
          <div className="col-lg-6">
            <div className="input-box">
              <header>Create Account</header>
              <form onSubmit={registerSubmit}>
                <div className="input-field">
                  <input
                    type="text"
                    className="input"
                    onChange={handleInput}
                    value={registerInput.name}
                    name="name"
                    id="name"
                  />
                  <label>Full Name</label>
                  <span className="text-danger">
                    {registerInput.error_list.name}
                  </span>
                </div>
                <div className="input-field">
                  <input
                    type="email"
                    className="input"
                    onChange={handleInput}
                    value={registerInput.email}
                    name="email"
                    id="email"
                  />
                  <label>Email</label>
                  <span className="text-danger">
                    {registerInput.error_list.email}
                  </span>
                </div>
                <div className="input-field">
                  <input
                    type="text"
                    className="input"
                    onChange={handleInput}
                    value={registerInput.mobile}
                    name="mobile"
                    id="mobile"
                  />
                  <label>Mobile</label>
                  <span className="text-danger">
                    {registerInput.error_list.mobile}
                  </span>
                </div>
                <div className="input-field">
                  <input
                    type="password"
                    className="input"
                    onChange={handleInput}
                    value={registerInput.password}
                    name="password"
                    id="password"
                  />
                  <label>Password</label>
                  <span className="text-danger">
                    {registerInput.error_list.password}
                  </span>
                </div>
                <div className="ps-2 pb-3">
                  <input type="checkbox" className="me-1" name="" id="" />
                  <Link to="/terms-conditions">
                    Agree to our terms and conditions
                  </Link>
                </div>
                <div className="input-field">
                  <button type="submit" className="login-submit">
                    Register
                  </button>
                </div>
              </form>
              <div className="signin">
                <div className="signup pb-2">
                  <span>
                    <Link to="/login">Already has an account?</Link>
                  </span>
                </div>
                <span className="pb-2">
                  <Link to="#">Forgot password?</Link>
                </span>
              </div>
            </div>
          </div>
          <div className="col-lg-3"></div>
        </div>
      </div>
    </section>
  );
}

export default Register;

And my App.js react file

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Routes, Route } from "react-router";
import axios from "axios";

import "./App.css";

import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Home from "./components/Home";
import Products from "./components/Products";
import BestDeals from "./components/BestDeals";
import VendorProducts from "./components/VendorProducts";
import ProductCategory from "./components/ProductCategory";
import ProductDetails from "./components/ProductDetails";
import SearchProduct from "./components/SearchProduct";
import Wishlist from "./components/Wishlist";
import Cart from "./components/Cart";
import Checkout from "./components/Checkout";
import Thanks from "./components/Thanks";
import Orders from "./components/Orders";
import OrderDetails from "./components/OrderDetails";
import Courses from "./components/Courses";
import CourseCategory from "./components/CourseCategory";
import CourseDetails from "./components/CourseDetails";
import SearchCourse from "./components/SearchCourse";
import FavouriteCourses from "./components/FavouriteCourses";
import Blogs from "./components/Blogs";
import BlogCategory from "./components/BlogCategory";
import BlogTag from "./components/BlogTag";
import BlogDetails from "./components/BlogDetails";
import BlogVideoDetails from "./components/BlogVideoDetails";
import SearchBlog from "./components/SearchBlog";
import Login from "./components/Login";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";
import Profile from "./components/Profile";
import ProfileSettings from "./components/ProfileSettings";
import VendorRegister from "./components/VendorRegister";
import Contact from "./components/Contact";
import ErrorPage from "./components/ErrorPage";

axios.defaults.baseURL = "http://jaano.test";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["Accept"] = "application/json";

axios.defaults.withCredentials = true;

function App() {
  return (
    <div className="app">
      <Router>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<Home />}></Route>
          <Route exact path="/products" element={<Products />}></Route>
          <Route exact path="/best-deals" element={<BestDeals />}></Route>
          <Route
            exact
            path="/vendor-products"
            element={<VendorProducts />}
          ></Route>
          <Route
            exact
            path="/product-category"
            element={<ProductCategory />}
          ></Route>
          <Route
            exact
            path="/product-details"
            element={<ProductDetails />}
          ></Route>
          <Route
            exact
            path="/search-product"
            element={<SearchProduct />}
          ></Route>
          <Route exact path="/wishlist" element={<Wishlist />}></Route>
          <Route exact path="/cart" element={<Cart />}></Route>
          <Route exact path="/checkout" element={<Checkout />}></Route>
          <Route exact path="/thanks" element={<Thanks />}></Route>
          <Route exact path="/orders" element={<Orders />}></Route>
          <Route exact path="/order-details" element={<OrderDetails />}></Route>
          <Route exact path="/courses" element={<Courses />}></Route>
          <Route
            exact
            path="/course-category"
            element={<CourseCategory />}
          ></Route>
          <Route
            exact
            path="/course-details"
            element={<CourseDetails />}
          ></Route>
          <Route exact path="/search-course" element={<SearchCourse />}></Route>
          <Route
            exact
            path="/favourite-courses"
            element={<FavouriteCourses />}
          ></Route>
          <Route exact path="/blogs" element={<Blogs />}></Route>
          <Route exact path="/blog-category" element={<BlogCategory />}></Route>
          <Route exact path="/blog-tag" element={<BlogTag />}></Route>
          <Route exact path="/blog-details" element={<BlogDetails />}></Route>
          <Route exact path="/search-blog" element={<SearchBlog />}></Route>
          <Route
            exact
            path="/blog-video-details"
            element={<BlogVideoDetails />}
          ></Route>
          <Route exact path="/login" element={<Login />}></Route>
          <Route exact path="/register" element={<Register />}></Route>
          <Route exact path="/dashboard" element={<Dashboard />}></Route>
          <Route exact path="/profile" element={<Profile />}></Route>
          <Route
            exact
            path="/profile-settings"
            element={<ProfileSettings />}
          ></Route>
          <Route
            exact
            path="/vendor-register"
            element={<VendorRegister />}
          ></Route>
          <Route exact path="/contact" element={<Contact />}></Route>
          <Route exact path="/404" element={<ErrorPage />}></Route>
        </Routes>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

Please any help?