Duplicate requests when click button

Question

I'm having an issue with a button click (I'm not sure if that button's fault). I'm working with exception logging, if a service in my service layer fails, it will record the error and POST it on my server to store the log. But the problem is The 1st time I click the button, it only return the error of service fail, no POST request was made (this is weird). The 2nd time, it returns 1 error GET request and 1 POST request (this one will send an error log POST request) The 3rd time, 1 error GET request and 2 POST requests (same payload) The 4td time, 1 error GET request and 3 POST requests. It keeps adding 1 POST every time I click the button.

This is the function for the onClick event

const getItem = async (): Promise<void> => {
    try {
        const res = await service.getAllItem(); //Here I modify it so this service will always fail
        setData(remap(res));
    } catch (err) {
            // console.log('foobar'); //I thought the catch statement in 1st click cannot be reached so I tried to print something but it work nomarlly
            await logger('myfile.tsx', 'myfunctionname', err.stack, LogLevel.Error, err);
        }
    }
};

I don't think the service have any problem but I post it here in case

async getAllItem(): Promise<any> {
    const dataRetrieve: any = await this.context.web.lists.getByTitle(this.directory).items();
    if (dataRetrieve) {
        const result: INode[] = [];
        for (const i of dataRetrieve) {
            result.concat(JSONmapping(i));
        }
        console.log(result);
        return result;
    }
}