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, any help?

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 [passwordInput, setPasswordInput] = useState({
        current_password: "",
        new_password: "",
        confirm_password: "",
    });

    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();
        }
    }

    //Updating user password code
    const handleInput = (e) => {
        e.persist();
        setPasswordInput({
            ...passwordInput,
            [e.target.name]: e.target.value,
        });
    };

    async function handleUpdatePassword(e) {
        e.preventDefault();

        const Formdata = {
            current_password: passwordInput.current_password,
            new_password: passwordInput.new_password,
            confirm_password: passwordInput.confirm_password,
        };

        const res = await fetch("/api/update_password", {
            method: "post",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify(Formdata),
        });

        const data = await res.json();

        if (data.errors) {
            setErrors(data.errors);
            alert(data.message);
        } else {
            navigate("/profile_settings");
            alert(data.message);
            window.location.reload(); //this will reload your page after updating your data
        }
    }

    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 className="md:col-span-1">
                        <div className="shadow-md border border-slate-300 rounded-lg">
                            <h3 className="text-lg font-bold text-slate-800 px-4 py-2">
                                Password Update
                            </h3>
                            <form
                                onSubmit={handleUpdatePassword}
                                className="w-full p-4"
                            >
                                <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"
                                        >
                                            Current Password
                                        </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="password"
                                            id="current_password"
                                            name="current_password"
                                            onChange={handleInput}
                                            value={
                                                passwordInput.current_password
                                            }
                                            placeholder="Current Password"
                                        />
                                        {errors.current_password && (
                                            <p className="text-red-600 italic">
                                                {errors.current_password[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-last-name"
                                        >
                                            New Password
                                        </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="password"
                                            id="new_password"
                                            name="new_password"
                                            onChange={handleInput}
                                            value={passwordInput.new_password}
                                            placeholder="New Password"
                                        />
                                        {errors.new_password && (
                                            <p className="text-red-600 italic">
                                                {errors.new_password[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-last-name"
                                        >
                                            Confirm Password
                                        </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="password"
                                            id="confirm_password"
                                            name="confirm_password"
                                            onChange={handleInput}
                                            value={
                                                passwordInput.confirm_password
                                            }
                                            placeholder="Confirm Password"
                                        />
                                        {errors.confirm_password && (
                                            <p className="text-red-600 italic">
                                                {errors.confirm_password[0]}
                                            </p>
                                        )}
                                    </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 Password
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {/* main content start */}
        </>
    );
}

export default ProfileSettings;

And AuthController,

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!"
        ]);
    }