Why is my async remove method with DELETE restapi call in reactjs not working?

Why is my onclick() remove method not working in this react component? I checked the DELETE API call using postman and it works fine. The interface is also displayed correctly with all the information. Its just that when I click the delete button nothing happens, but it should have triggered the async remove method to invoke the DELETE API call.

import React, { Component } from 'react';
import AppNav from './AppNav';
import DatePicker from 'react-datepicker';

import "react-datepicker/dist/react-datepicker.css";
import { Table, FormGroup, Button, Input, Container, Label, Form } from 'reactstrap';
import { Link } from 'react-router-dom';
import Category from './Category';


class Expenses extends Component {

    emptyItem = {
        id: '103',
        expensedate : new Date(),
        description : '',
        location : '',
        categories : [1, 'Travel']
    }

    constructor(props) {
        super(props)

        this.state = {
            isLoading: false,
            Categories : [],
            Expenses : [],
            date : new Date(),
            item : this.emptyItem
        }
    }

    async remove(id){
        await fetch(`/api/expenses/${id}` , {
            method: 'DELETE',
            headers: {
                'Accept' : 'application/json',
                'Content-Type' : 'application/json'
            }
        }).then(() => {
            let updatedExpenses = [...this.state.Expenses].filter(i => i.id !== id);
            this.setState({Expenses : updatedExpenses});
        });
    }


    async componentDidMount() {
        const response = await fetch('/api/categories');
        const body = await response.json();
        this.setState({Categories : body , isLoading : false});

        const responseExp = await fetch('/api/expenses');
        const bodyExp = await responseExp.json();
        this.setState({Expenses : bodyExp , isLoading : false});        
    }


    render() {
        const title= <h3>Add Expense</h3>;
        const {Categories} = this.state;
        const {Expenses, isLoading} = this.state;

        if(isLoading)
            return(<div>Loading....</div>)

            let optionList = 
                Categories.map( category =>
                    <option id={category.id}>
                        {category.name}
                        </option>
                )
            
            let rows=
                Expenses.map( expense =>
                    <tr>
                        <td>{expense.description}</td>
                        <td>{expense.location}</td>
                        <td>{expense.expensedate}</td>
                        <td>{expense.category.name}</td>
                        <td><Button size="sm" color="danger" onCLick={ () => this.remove(expense.id)}>Delete</Button></td>
                    </tr>
                    )

        return ( 
            <div>
                <AppNav/>
                <Container>
                    {title}
                    <Form onSubmit={this.handleSubmit}>
                        <FormGroup>
                            <Label for="title">Title</Label>
                            <input type="text" name="title" id="title" onChange={this.handleChange} autoComplete="name"/>
                        </FormGroup>

                        <FormGroup>
                            <Label for="title">Category</Label>
                            <select>
                                {optionList}
                            </select>

                            
                            <input type="text" name="category" id="category" onChange={this.handleChange}/>
                        </FormGroup>

                        <FormGroup>
                            <Label for="city">Date</Label>
                            <DatePicker selected={this.state.date} onChange={this.handleDateChange}/>
                        </FormGroup>
                        
                        <div className="row">
                        <FormGroup className="col-md-4 mb-3">
                            <Label for="location">Location</Label>
                            <input type="text" name="location" id="location"/>
                        </FormGroup>
                        </div>

                        <FormGroup>
                            <Button color="primary" type="subimt">Save</Button>{' '}
                            <Button color="secondary" tag={Link} to="/">Cancel</Button>
                        </FormGroup>
                    </Form>
                </Container>

            {''}
                <Container>
                    <h3>Expense List</h3>
                    <Table className="mt-4">
                        <thead>
                            <tr>
                                <th width="30%">Description</th>
                                <th width="10%">Location</th>
                                <th>Date</th>                                
                                <th>Category</th>
                                <th width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {rows}
                        </tbody>

                    </Table>
                </Container>

            </div>
         );
    }
}

 
export default Expenses;

edit the

onCLick={ () => this.remove(expense.id)}

by

onClick={() => this.remove(expense.id)}, there's a typo with the keyword onClick