Date Range Filtering from Rest Api to Element Plus table

Question

still no data are being displayed

Display data using Date Range, The user choose the Start Date and End Date The Problem is no data been displayed even though there is data in my Msql database please helps #My date range layout:

`<el-row :gutter="20" class="search-bar gutterWidth">
            <el-col :span="6">Users | Operation Head</el-col>
            <el-col :span="7">
              <el-date-picker
                v-model="startDate"
                type="datetime"
                placeholder="Start Date"
                clearable
                format="YYYY-MM-DD HH:mm:ss"
                date-format="MMM DD, YYYY"
                time-format="HH:mm"
              />
            </el-col>
            <el-col :span="7">
              <el-date-picker
                v-model="endDate"
                type="datetime"
                placeholder="End Date"
                clearable
                format="YYYY-MM-DD HH:mm:ss"
                date-format="MMM DD, YYYY"
                time-format="HH:mm"
              />
            </el-col>
            <el-col :span="4">
              <el-button @click="searchVisit">Search</el-button>
            </el-col>
          </el-row>`

#My Table:

` <div class="dataTableContent">
        <el-table :data="users">
          <el-table-column label="Name" sortable>
            <template #default="{ row }">
              {{ row.firstname }} {{ row.lastname }}
            </template>
          </el-table-column>

          <el-table-column
            prop="email"
            label="Email"
            sortable
          ></el-table-column>

          <el-table-column
            prop="locationName"
            label="Location"
            sortable
          ></el-table-column>
          <el-table-column label="Role" sortable>
            <template #default="{ row }">
              {{ row.roleName }} {{ row.roleLevel }}
            </template></el-table-column
          >
          <el-table-column
            prop="contactNumber"
            label="Contact Number"
            sortable
          ></el-table-column>

          <el-table-column
            prop="dateTimeCreated"
            label="Date/Time Created"
            sortable
          ></el-table-column>
          <el-table-column label="Action">
            <template #default="scope">
              <section class="row d-flex flex-nowrap">
                <section class="col-4">
                  <el-button @click="viewUser(scope.row.id)" type="primary"
                    >Assign</el-button
                  >
                </section>

                <section class="col-4">
                  <el-button type="danger" @click="deleteUser(scope.row.id)"
                    >Delete</el-button
                  >
                </section>
                <section class="col-4">
                  <el-button
                    plain
                    @click="
                      viewUserDetails(
                        scope.row.id,
                        scope.row.firstname,
                        scope.row.lastname,
                        scope.row.email,
                        scope.row.contactNumber,
                      )
                    "
                    >Edit</el-button
                  >
                </section>
              </section>
            </template>
          </el-table-column>
        </el-table>`
        <!--End table-->

And i have made a method for it:

`computed: {
    filteredUsers() {
      const startDate = new Date(this.startDate);
      const endDate = new Date(this.endDate);

      return this.users.filter((user) => {
        const userDate = new Date(user.dateTimeCreated);
        return userDate >= startDate && userDate <= endDate;
      });
    },
  },
`

still no data are being displayed

Display data using Date Range, The user choose the Start Date and End Date The Problem is no data been displayed even though there is data in my Msql database please helps