无法在onclick事件处理程序中传递参数-React

我发现一个问题，当我单击“删除”按钮时，它错误地指出handleDelete未定义。但是，我已经定义了它。有人可以建议我解决该问题吗？

我试图将删除按钮放在地图功能之外，并且可以正常工作。但是，当我在地图功能中使用删除按钮时，却没有。

    import React from "react";
    import "./App.css";
    import { v1 as uuid } from "uuid";

    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          list: [],
          item: "",
          id: uuid(),
        };
      }
      handleChange = (e) => {
        this.setState({
          item: e.target.value,
        });
      };
      handleSubmit = (e) => {
        e.preventDefault();
        const newItem = {
          item: this.state.item,
          id: this.state.id,
        };

        const newList = [...this.state.list, newItem];
        this.setState({
          list: newList,
          item: "",
          id: uuid(),
        });
      };
      handleDelete = (id) => {
        console.log("delete button pressed");
      };
      clearList = () => {
        this.setState({
          list: [],
        });
      };
      render() {
        return (
          <>
            <form onSubmit={this.handleSubmit}>
              <input
                placeholder="enter list name"
                value={this.state.item}
                onChange={this.handleChange}
              />
              <button type="submit">add item</button>
            </form>
            <ul>
              {this.state.list.map(function (element, id) {
                return (
                  <li key={id}>
                    <h5>{element.item}</h5>
                    <button type="button">edit</button>
                    <button onClick={() => this.handleDelete(id)}>delete</button>
                  </li>
                );
              })}
            </ul>
            <button type="button" onClick={this.clearList}>
              clear list
            </button>

          </>
        );
      }
    }