How to delete and edit items on the Sequelize database through controllers?

I'm new to sequelize and am trying to build an app where I can delete and edit the items that are stored in an array in the database. However, I do not know how to delete as the console kept giving me errors that the handleDelete is not a function.

How do I allow user to edit the data such as product name in the backend too? Are there any methods for that? Thank you.

Here's my controller in the backend.

class ProductsController extends BaseController {
  constructor(model, userModel) {
    super(model);
    this.userModel = userModel;
  }

  // CRUD functions for products belonging to a user
  async getAllProducts(req, res) {
    try {
      const output = await this.model.findAll();
      return res.json(output);
    } catch (err) {
      return res.status(400).json({ error: true, msg: err });
    }
  }

  async getOneProduct(req, res) {
    const { productId } = req.body;
    try {
      const product = await this.model.findByPk(productId, {
        include: [
          {
            model: this.userModel,
            through: { attributes: [] },
          },
        ],
      });
      return res.json(product);
    } catch (err) {
      return res.status(400).json({ error: true, msg: err });
    }
  }

  async deleteProduct(req, res) {
    const { productId } = req.body;
    try {
      return !!(await this.model.destroy({
        where: {
          id: productId,
        },
      }));
    } catch (e) {
      return false;
    }
  }
}

For my frontend, here is my homepage where I call the list of products,

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import ProductsList from "./ProductList";

export default function Home() {
  const [products, setProducts] = useState([]);
  const [ids, setIDs] = useState();

  const getData = async () => {
    let API = await axios.get(`localhost:3000/products`);
    setProducts(API.data);
  };

  useEffect(() => {
    getData();
  }, []);

  const handleDelete = async (ids) => {
    let product= {
      id: ids,
    };
    let response = await axios.delete(`localhost:3000/products/${ids}`, {
      data: product,
    });

    getData();
  };

  return (
    <div>
      <Link to="/">
        {
          <ProductsList
            products={products}
            ids={ids}
            setIDs={setIDs}
            handleDelete={handleDelete}
          />
        }
      </Link>
    </div>
  );
}

And here is the component where the delete button is placed.

import React from "react";
import { Link } from "react-router-dom";

const ProductsList = ({ products, ids, setIDs, handleDelete }) => {
  return (
    <div className="Overall">
      {products.map((product, index) => (
        <div className="container">
          {setIDs(product.id)}
          <Link
            to={`/products/${index + 1}`}
            key={product.id}
          >
            <div>
              {product.name}
              <br />
              <br />
              <button onClick={() => handleDelete(ids)}>Delete</button>
            </div>
          </Link>
        </div>
      ))}
    </div>
  );
};

export default ProductsList;

This is the component that renders out the page of single product

export default function singleProduct() {
  // react routes
  const params = useParams();
  const [single, setSingle] = useState([]);

  const getSingle = async () => {
    let singleProduct = await axios.get(`localhost:3000/products`);
    setSingle(singleProduct.data);
  };

  useEffect(() => {
    getSingle();
  }, []);

  return (
    <div>
      {single
        .filter((product) => Number(params.productId) === Number(product.id))
        .map((product) => {
          return (
            <div>
              <p>{product.name}</p>
            </div>
          );
        })}
    </div>
  );
}