Abnorma page reload

I am working with a component to create and update a post, when I create the post everything works fine, but when I update and there is a validation error instead of the validation error showing the page will reload it's only applicable to that component.

here is the code for component

    const { data, setData, post, processing, errors, reset } = useForm({
        title: resource && updating ? resource.title : '',
        description: resource && updating ? resource.description : '',
        tag: resource && updating ? resource.tag : '',
        link: resource && updating ? resource.link : '',
        type: resource && updating ? resource.type : '',
        topic: resource && updating ? resource.topic_id : '',
    });
    const [topics, setTopics] = useState([])
    const { isAuth } = useAuth()
    useEffect(() => {
        if (showModal) {
            axios.get(Topics).then(res => {
                setTopics(res.data)
            })
        }
    }, [showModal]);

    const submit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const onSuccessMessage = updating
            ? 'Resource updated successfully.'
            : 'Resource posted successfully.';
        const routeName = updating ? 'question.update' : 'question.store';
        post(route(routeName, updating ? resource : null), {
            onSuccess: () => {
                successToast(onSuccessMessage);
                reset();
                toggleModal();
            },
        });
    };

    return (
        <Dialog onOpenChange={toggleModal} open={showModal}>
            <DialogTrigger>
                {trigger}
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{resource ? 'Update Resource' : 'Post new Resource'}</DialogTitle>

                    {!isAuth ? <PleaseLogin /> : <form onSubmit={submit}>
                        <div className='grid gap-4 mt-4'>
                            <Input type={'text'}
                                className=''
                                name='title'
                                errorMessage={errors.title}
                                value={data.title}
                                onChange={(e) => handleChange(setData, e)}
                                placeholder='Resource title' />
                            <Textarea
                                name='description'
                                errorMessage={errors.description}
                                value={data.description}
                                onChange={(e) => handleChange(setData, e)}
                                placeholder='Describe resource' />
                            <Input
                                type={'text'}
                                className=''
                                name='tag'
                                errorMessage={errors.tag}
                                value={data.tag}
                                onChange={(e) => handleChange(setData, e)}
                                placeholder='e.g family,the word...' />

                            <div>
                                <Select name="topic" errorMessage={errors.topic} value={data.topic} onChange={(e) => setData('topic', e.target.value)}>
                                    <option value="1">Pick a topic</option>
                                    {
                                        topics ? topics.map(topic => (
                                            <option key={nanoid()} value={topic.id}>{topic.name}</option>
                                        ))
                                            : null
                                    }
                                </Select>
                            </div>

                            <div className="flex items-start justify-start gap-3">
                                <div className="w-full">
                                    <Select name='type' className="w-full" value={data.type}
                                        onChange={(e) => handleChange(setData, e)}
                                        errorMessage={errors.type}
                                    >
                                        <option value="">select type</option>
                                        {
                                            resourceType.map(type => (
                                                <option key={nanoid()} value={type}>{type}</option>
                                            ))
                                        }
                                    </Select>
                                </div>
                                <div>
                                    <Input
                                        value={data.link}
                                        errorMessage={errors.link}
                                        onChange={(e) => handleChange(setData, e)}
                                        name='link' placeholder='link to resource' type={'text'} />
                                </div>
                            </div>

                            <div>
                                <Button
                                    disabled={processing}
                                    type='submit'
                                >Post</Button>
                            </div>
                        </div>
                    </form>}
                </DialogHeader>
            </DialogContent>
        </Dialog>```

the route

 Route::middleware('auth')->group(function () {
        Route::post('/store', [ResourceController::class, 'store'])->name('store');
        Route::post('/{resource:slug}/update', [ResourceController::class, 'update'])->name('update');
        Route::delete('/{resource:slug}/delete', [ResourceController::class, 'destroy'])->name('destroy');
    });