422 name and mobile field required React js And Laravel 11

I am having 422 name and mobile field required. When I try this laravel 11 api in my postman, it works perfectly, but when I try to update my profile in react js I get the 422 error in my console log, I am using laravel sanctum, any help?

import { useContext, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { AppContext } from "../Context/AppContext"; import { ToastContainer, toast } from "react-toastify"; function ProfileSettings() { const { token, user } = useContext(AppContext); const navigate = useNavigate(); const [profileInput, setProfileInput] = useState({ id: user.id, name: user.name, mobile: user.mobile, profile_image: null, }); const [errors, setErrors] = useState({}); const handleProfile = (e) => { const { name, value, files } = e.target; if (name === "profile_image") { setProfileInput((prev) => ({ ...prev, profile_image: files[0], })); } else { setProfileInput((prev) => ({ ...prev, [name]: value, })); } }; async function handleUpdateProfile(e) { e.preventDefault(); const formData = new FormData(); formData.append("name", profileInput.name); formData.append("mobile", profileInput.mobile); if (profileInput.profile_image) { formData.append("profile_image", profileInput.profile_image); } const res = await fetch(`/api/update_profile`, { method: "POST", headers: { Authorization: `Bearer ${token}`, }, body: formData, }); const data = await res.json(); if (data.errors) { setErrors(data.errors); } else { alert(data.message); navigate("/update_profile"); window.location.reload(); } } } return ( <> {/* main content start */} <div className="pb-7"> <div className="flex justify-between text-xs font-medium pb-4"> <div> <ul className="flex items-center"> <li> <Link to="/" className="text-gray-400 hover:text-gray-900" > <i className="fa-light fa-house mr-1"></i> Home </Link> </li> <li> <i className="fa-light fa-arrow-right mx-2"></i> </li> <li>Profile Settings</li> </ul> </div> <div> <Link to="" className="bg-red-600 hover:bg-red-500 text-white font-bold py-2 px-4 rounded" > <i className="fa-light fa-arrow-left mr-1"></i>Back </Link> </div> </div> <div className="w-full flex justify-between items-center mb-3 mt-1"> <div> <h3 className="text-lg font-bold text-slate-800"> Profile Settings </h3> </div> <div></div> </div> <div className="grid grid-cols-3"> <div className="md:col-span-2 mr-2"> <div className="shadow-md border border-slate-300 rounded-lg"> <h3 className="text-lg font-bold text-slate-800 px-4 py-2"> Profile Update </h3> <form onSubmit={handleUpdateProfile} className="w-full p-4" encType="multipart/form-data" > <div className="grid md:grid-cols-2 gap-2"> <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full px-3"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="grid-last-name" > Email </label> <input className="appearance-none block w-full text-gray-500 border border-gray-300 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-primary" id="grid-last-name" email="email" type="email" placeholder={user && user.email} readOnly /> </div> </div> <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full px-3"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="grid-last-name" > Name </label> <input className="appearance-none block w-full text-gray-500 border border-gray-300 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-primary" type="text" id="name" name="name" value={profileInput.name} onChange={handleProfile} /> {errors.name && ( <p className="text-red-600 italic"> {errors.name[0]} </p> )} </div> </div> </div> <div className="grid md:grid-cols-2 gap-2"> <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full px-3"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="grid-last-name" > Mobile </label> <input className="appearance-none block w-full text-gray-500 border border-gray-300 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-primary" type="text" id="mobile" name="mobile" value={profileInput.mobile} onChange={handleProfile} /> {errors.mobile && ( <p className="text-red-600 italic"> {errors.mobile[0]} </p> )} </div> </div> <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full px-3"> <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="grid-city" > Upload file </label> <input type="file" name="profile_image" accept="image/*" className="w-full text-gray-500 font-semibold text-sm bg-white border file:cursor-pointer cursor-pointer file:border-0 file:py-2 file:px-4 file:mr-4 file:bg-gray-100 file:hover:bg-gray-200 file:text-gray-500 rounded" onChange={handleProfile} /> </div> </div> </div> <div className="flex flex-wrap -mx-3 mb-6"> <div className="w-full px-3 text-xs font-medium"> <button type="submit" className="bg-primary hover:bg-secondary text-gray-900 font-bold py-2 px-4 rounded mr-2" > <i className="fa-light fa-pen-to-square mr-1"></i> Update Profile </button> </div> </div> </form> </div> </div> </div> </div> {/* main content start */} </> ); } export default ProfileSettings; 

And this is my AuthController.php, I am using laravel sanctum

public function updateProfile(Request $request) { $validated = $request->validate([ 'name' => 'required', 'mobile' => 'required|numeric|digits:10', 'profile_image' => 'nullable|image|mimes:jpg,png,jpeg,gif,svg', ]); $userDetails = User::where('id', Auth::user()->id)->first(); $image = $request->file('profile_image'); if ($image) { if ($userDetails->profile_image) { Storage::disk('public')->deleteDirectory(dirname($userDetails->profile_image)); } $profileImage = $image->store('user/' . Str::random(), 'public'); $userDetails-> profile_image = $profileImage; } $userDetails->name = $request->name; $userDetails->mobile = $request->mobile; $userDetails->update(); return response()->json([ "username"=>$userDetails->name, "userDetails"=>$userDetails, "message"=>"User Profile Updated Successfully!" ]); } 

Any help?