Inserting a data into database

I’m new, this is laravel, react + inertia,

I want to insert a data, name and photo when button create is being clicked. Can you check what is wrong, and please explain to me.

StoreController.php

<?php

declare(strict_types=1);

namespace PetcheckrCommonUiHttpAdminControllersAnimalBreeds;

use IlluminateHttpRedirectResponse;
use PetcheckrCommonApplicationAnimalBreedsCommandsStore;
use PetcheckrCommonUiHttpAdminRequestsAnimalBreedsStoreRequest;

class StoreController
{
    public function __invoke(StoreRequest $request): RedirectResponse
    {
        dispatch_sync(
            job: Store::fromArray(
                payload: $request->validated(),
            ),
        );
        return response()->redirectToRoute(
            'petcheckr.config.animal-breeds.index'
        )->with('flash.message', 'Animal Breed successfully created!');
    }
}

Store.php:

<?php

declare(strict_types=1);

namespace PetcheckrCommonApplicationAnimalBreedsCommands;

use IlluminateFoundationBusDispatchable;
use IlluminateHttpUploadedFile;
use RamseyUuidUuid;

class Store extends Update
{
    use Dispatchable;

    public function __construct(
        string $name,
        UploadedFile|null $photo = null,
    ) {
        parent::__construct(
            breed_id: Uuid::uuid4()->toString(),
            name: $name,
            photo: $photo,
        );
    }
    public static function fromArray(array $payload): Store
    {
        return new Store(
            name: $payload['name'] ?? null,
            photo: $payload['photo'] ?? null,
        );
    }
}

Update.php:

<?php

declare(strict_types=1);

namespace PetcheckrCommonApplicationAnimalBreedsCommands;

use IlluminateFoundationBusDispatchable;
use IlluminateHttpUploadedFile;

class Update
{
    use Dispatchable;

    public function __construct(
        private string $breed_id,
        private string $name,
        private UploadedFile|null $photo = null,
        private bool|null $photoDeleted = null,
    ) {
    }

    public function getBreedId(): string
    {
        return $this->breed_id;
    }

    public function getName(): string
    {
        return $this->name;
    }

    public function getPhoto(): ?UploadedFile
    {
        return $this->photo;
    }

    public function getPhotoDeleted(): ?bool
    {
        return $this->photoDeleted;
    }

StoreRequest.php:

<?php

declare(strict_types=1);

namespace PetcheckrCommonUiHttpAdminRequestsAnimalBreeds;

use IlluminateFoundationHttpFormRequest;
use IlluminateHttpUploadedFile;
use XocdrAuthDomainRulesPasswordRule;

/**
 * @property-read string $breed_id
 * @property-read string $name
 * @property-read UploadedFile|null $photo
 */
class StoreRequest extends FormRequest
{
    public function authorize(): bool
    {
        return !empty($this->user()) && in_array(
            $this->user()->role,
            [
                'PETCHECKR.ADMIN',
                'VET_PRACTICE.ADMIN',
            ]
        );
    }

Create.vue:

<script setup>
import HeadingWithDescriptionAndActions from "@/Xocdr/Components/Panels/Heading/HeadingWithDescriptionAndActions.vue";
import Card from "@/Xocdr/Components/Panels/Card.vue";
import {ChevronLeftIcon} from "@heroicons/vue/20/solid/index.js";
import {router, useForm, usePage} from "@inertiajs/vue3";
import StackedForm from "@/Xocdr/Components/Forms/StackedForm.vue";
import TextInput from "@/Xocdr/Components/Forms/Fields/TextInput.vue";
import ImageUpload from "@/Xocdr/Components/Forms/Fields/ImageUpload.vue";

import {useI18n} from "vue-i18n";
const { t } = useI18n();
import getLanguages from '@/Xocdr/Config/Languages.js';
const languages = getLanguages(
    t,
    usePage().props?.languages || ['en']
);

const form = useForm({
    name: null,
    photo: null,
});

const user = usePage().props.auth.user;

const fields = [
    {
        identifier: 'name',
        label: t('petcheckr.configuration.name'),
        required: true,
        component: TextInput,
        placeholder: t('petcheckr.configuration.name'),
        information: null,
    },
    {
        identifier: 'photo',
        label: t('xocdr.auth.profile_picture'),
        required: false,
        component: ImageUpload,
        information: null,
    },
]

function backToOverView() {
    router.get(
        route("petcheckr.config.animal-breeds.index")
    );
}

function submitForm() {
    form.post(
        route('petcheckr.config.animal-breeds.store'),
    );
}

</script>
<template>
    <Card class="mb-10" :header-no-margin="true" :content-no-margin="true">
        <template v-slot:header>
            <HeadingWithDescriptionAndActions
                :title="'Title'"
                :actions="[
                    {
                        identifier: 'back',
                        icon: ChevronLeftIcon,
                        title: $t('petcheckr.configuration.back_to_overview'),
                    }
                ]"
                :context="{}"
                @back-click="backToOverView"
            >
            </HeadingWithDescriptionAndActions>
        </template>
        <template v-slot>
            <StackedForm
                :fields="fields"
                v-model="form"
                @delete-photo="(options) => { form.photo = ''; options.callback && options.callback();}"
                :submit-button-title="'Create'"
                @submit="submitForm"
            />
        </template>
    </Card>
</template>

<style scoped>

</style>

for routes:
authenticated.php

use PetcheckrCommonUiHttpAdminControllersAnimalBreedsCreateController as AnimalBreedsCreateController;
use PetcheckrCommonUiHttpAdminControllersAnimalBreedsStoreController as AnimalBreedsStoreController;

Route::get(
    '/animal-breeds/create',
    AnimalBreedsCreateController::class,
)->name('config.animal-breeds.create');

Route::post(
    'animal-breeds',
    AnimalBreedsStoreController::class,
)->name('config.animal-breeds.store');

To those who mastered this language I’m seeking help.

I almost 2 weeks now, I can’t fix the problem.
I copy from the other files insert functions and applied to mine but doesn’t work