How can i remove the file by using the cross icon after file is uploaded, as it gives me a error with 419 on the page url itself

Question

I'm using file pond for uploading images but the issue I'm facing is when I try to remove the images after it's uploaded via the cross icon the on remove file method doesn't seem to work for me as it returns a console error stating A419 error on the page you are on itself and I'm not able to debug the issue can anyone help me with this.

Below is the code which I have used on my page

const fileInput = document.querySelector('input[name="filepond"]');
        FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateSize, FilePondPluginFileValidateType);
        const pond = FilePond.create(fileInput, {
            labelIdle: 'Upload upto 15 images <span class="filepond--label-action"> Browse </span>',
            allowMultiple: true,
            allowRemove: true,
            maxFiles: 15,
            server: {
                process: {
                    url: '{{ route('temp.upload') }}',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    method: 'POST',
                    onload: (response) => {
                        const fileId = response;
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'images[]';
                        input.value = fileId;
                        document.getElementById('formCreate').appendChild(input);
                    }
                },
                onprocessfiles: () => {
                    document.querySelector('button[type="submit"]').disabled = true;
                },
                onprocessfile: (error, file) => {
                    if (error) {
                        file.error = true;
                        file.errorText = error;
                    } else {
                        file.error = false;
                    }
                },
                onremovefile(error, file) {
                    console.log(file);
                },
            },
            allowFileSizeValidation: true,
            maxFileSize: '3MB',
            maxTotalFileSize: '15MB',
            allowFileTypeValidation: true,
            acceptedFileTypes: ['image/*']
        });

I have tried all the possible methods but either of them are not working and below is some code samples which I have tried to implement to resolve my issue but it didn't it didn't function

remove: {
            url: '{{ route('temp.remove') }}', // Specify the URL for file removal
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            method: 'DELETE'
        },

this above code with remove doesn't seem to be working for me.

revert: {
            url: '{{ route('temp.remove') }}', // Specify the URL for file removal
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            method: 'DELETE',
            onload: (response) => {
                consloe.log(response);
            }
        },

this above code with retrieves hits the server but the issue is when I try to get what is in the request it just returns blank I tried to on debug it on the server I'm on laravel but the request doesn't have anything and I'm confused how can I solve my issue of deleting the image