React.js datatable data filter by datepicker and get sum value of column

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Form } from "react-bootstrap";

function SalesReport() {
  const [Data, setData] = useState([]);
 
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    axios.get("http://localhost:4000/api/cash/showInvoices").then((res) => {
      const getData = res.data.data;
      setData(getData);
    });
  };

 

  return (
    <div className="row">
      <div className="card">
        <div className="card-body">
          <div className="d-inline-flex col-2 m-2">
            <Form.Group controlId="dob">
              <Form.Label>Start Date</Form.Label>
              <Form.Control
                type="date"
                name="startDate"
                placeholder="Date of Birth"
              
              />
            </Form.Group>
            <div className="ms-3">
              <Form.Group controlId="dob">
                <Form.Label>End Date</Form.Label>
                <Form.Control
                  type="date"
                  name="enddate"
                    value={}
                  placeholder="Date of Birth"
               
                />
              </Form.Group>
            </div>
            <div className="ms-2 mt-4">
              <button className="btn btn-secondary btn-lg" type="button">
                Print
              </button>
            </div>
          </div>

          <table
            id="datatable-buttons"
            className="table table dt-responsive nowrap w-100"
          >
            <thead>
              <tr>
                <th width="100px">Date</th>
                <th>Invoice Id</th>
                <th>Pay Method</th>
                <th>Total</th>
                <th>Customer Id</th>
                <th>Cart Id</th>
              </tr>
            </thead>

            <tbody>
              {Data &&
                Data.map((items) => {
                  return (
                    <tr>
                      <td> {new Date(items.date).toLocaleDateString()}</td>
                      <td>{items.invoice_id}</td>
                      <td>{items.pay_method}</td>
                      <td>{items.total}</td>
                      <td>{items.customer_id}</td>
                      <td>{items.inovice_cart_id}</td>
                    </tr>
                  );
                })}
            </tbody>
            <tfoot>
              <tr className="text-black font-weight-bol">
                <td>
                  <h5 className="total-label">Grand Total</h5>
                </td>
                <td className="total-col">
                  <label></label>
                </td>
                <td className="total-col">
                  <label></label>
                </td>
                <td className="total-col">
                  <label>2234</label>
                </td>
                <td className="total-col">
                  <label></label>
                </td>
                <td className="total-col">
                  <label></label>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  );
}

export default SalesReport;


**backend**

*router.js*
const {
  getInvoice,
  viewInvoiceByDate,
} = require("./cashManagement.controller");
const router = require("express").Router();
const cors = require("cors");

router.get("/showInvoices", getInvoice);
module.exports = router;

*controller.js*

const { getInvoice, viewInvoiceByDate } = require("./cashManagement.service");
module.exports = {
  getInvoice: (req, res) => {
    getInvoice((err, results) => {
      if (err) {
        console.log(err);
        return;
      }
      return res.json({
        success: 1,
        data: results,
      });
    });
  },
}

*service.js*

const pool = require("../../config/database");
module.exports = {
  getInvoice: (callBack) => {
    var todayDate = new Date().toISOString().slice(0, 10);

    pool.query(
      `SELECT * FROM cash_management WHERE date='${todayDate}'`,
      (errors, results, fields) => {
        if (errors) {
          return callBack(errors);
        }
        return callBack(null, results);
      }
    );
  },
}

That picture shows what I'm trying to do. by default today's relevant data show. it took from using "new Date()" method using with mysql select query . So , if I want to get particular days period data , I should select it from data picker. There is two datapickers . one for starting date, second one for end data selecting. if I select just start date , I need data from that day to today . otherwise if I select just endDate , I need to get data from today to end date . so I tried to that someways. It doesn't work properly. My backend code here ,it contains how I got data from database . I just got data from using "newDate()" method to took today data. how it should be changed when entering start date and end date . otherwise here table you can see the total column . and table footer has "GrandTotal " 4th column should get the total values of "total columns" previously I took it direct from database. but now cant , because it is changed by quickly. I think you have clear idea about issue. I tried many ways , but it didn't work. if there any expert help me to solve the issue.