javascript – React best way to filter datagrid

I have a table row, Where I am displaying the dat grid using material datagrid component.

Here’s codesandbox link – > https://codesandbox.io/s/modern-firefly-ncb3q?file=/src/App.js:1293-1560

Now the problem is I have tabs now clicking on each tabs I want to filter the data.

Image of the table tabs

Now I tried Implemented using state and useEffect() with switch case. But doesnot work properly, Perhaps it work sometime it breaks. Now I am looking for the best way to do this. Can any one help me with this?

Also While selecting it is getting dark in color, I dont want to do that. I dont want to change the color of the selected row.

import React, { useState, useRef, useCallback } from "react";
import Grid from "@material-ui/core/Grid";
import UnderlineButton from "./Underlinebtn";
import { GrayRectButton } from "./Button";
import { AddEditAssignFormSelect } from "./Select";
import { makeStyles } from "@material-ui/core/styles";
import { DataGrid } from "@material-ui/data-grid";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    paddingTop: 36,
    paddingBottom: 40,
    paddingLeft: 44,
    paddingRight: 34
  },
  title: {
    fontSize: 24,
    fontWeight: 700
  },
  filtersContainer: {
    marginTop: 15,
    padding: "0px 0px 0px 12px"
  },
  formControl: {
    minWidth: 158
  },
  approveAllButton: {
    backgroundColor: "rgba(48, 59, 86, 0.5)",
    color: "white",
    height: "100%",
    borderRadius: 10,
    fontSize: 14,
    "&:hover": {
      backgroundColor: "rgba(48, 59, 86, 0.5)",
      opacity: 0.5
    }
  },
  table: {
    height: 600,
    marginTop: 25,
    width: "100%"
  },
  tableContianer: {
    "& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
      border: "none"
    },
    border: "none",
    "& .MuiDataGrid-columnsContainer": {
      borderBottom: `1px solid rgba(78, 89, 185, 1)`
    },
    "& .even-row": {
      backgroundColor: "rgba(250, 250, 255, 1)"
    },
    "& .even-row-cells": {
      justifyContent: "center"
    },
    ".MuiPaginationItem-outlined": {
      border: "3px solid rgba(0,0,0,0.23)"
    }
  },
  buttonAll: {
    padding: "0px 0px 0px 12px"
  }
}));

export default function TableTabs({ rows, columns, CustomPagination }) {
  const classes = useStyles();
  const (valueType, activeValueType) = useState("");
  const (valueAll, ActiveAll) = useState(true);
  const (valueApproved, ActiveApproved) = useState(false);
  const (valueProgress, ProgressActive) = useState(false);
  const (valueDecline, DeclineActive) = useState(false);
  const (loading, setLoading) = useState(false);
  const isMounted = useRef(true);

  React.useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, ());

  const tableStatus = useCallback(
    async (filterVal) => {
      // don't send again while we are sending
      if (loading) return;
      // update state
      setLoading(true);
      // send the actual request
      await tableStatusUpdate(filterVal);
      // once the request is sent, update state again
      if (isMounted.current)
        // only update if we are still mounted
        setLoading(false);
    },
    (loading)
  ); // update the callback if the state changes

  const tableStatusUpdate = async (filterVal) => {
    activeValueType(filterVal);
    switch (filterVal) {
      case "":
        ActiveAll(true);
        ActiveApproved(false);
        ProgressActive(false);
        DeclineActive(false);
        return;
      case "approve":
        ActiveApproved(true);
        ProgressActive(false);
        DeclineActive(false);
        ActiveAll(false);
        return;
      case "progress":
        ProgressActive(true);
        ActiveApproved(false);
        DeclineActive(false);
        ActiveAll(false);
        return;
      case "decline":
        ProgressActive(false);
        DeclineActive(true);
        ActiveApproved(false);
        ActiveAll(false);
        return;
      default:
        ActiveAll(true);
        return;
    }
  };

  return (
    <Grid className={classes.root}>
      <div>
        <Grid container className={classes.filtersContainer}>
          <Grid lg={6} item container spacing={1}>
            <Grid item alignItems="center" justify="center">
              <UnderlineButton
                active={valueAll}
                alignItems="center"
                justify="center"
              >
                <div onClick={() => tableStatus("")}>All</div>
              </UnderlineButton>
            </Grid>
            <Grid item>
              <UnderlineButton active={valueApproved}>
                <div onClick={() => tableStatus("approve")}>Approved </div>
              </UnderlineButton>
            </Grid>
            <Grid item>
              <UnderlineButton active={valueProgress}>
                <div onClick={() => tableStatus("progress")}> In Progress </div>
              </UnderlineButton>
            </Grid>
            <Grid item>
              <UnderlineButton active={valueDecline}>
                <div onClick={() => tableStatus("decline")}>Decline</div>
              </UnderlineButton>
            </Grid>
          </Grid>
          <Grid lg={6} item container spacing={2} justify={"flex-end"}>
            <Grid item>
              <div className="project-filter-right-area d-flex justify-content-end col">
                <div className="scheduler-navigator"></div>
              </div>
            </Grid>
            <Grid item style={{ width: 158 }}>
              <AddEditAssignFormSelect
                values={({ value: "None", key: "123" })}
                sideLabel="All projects"
                name="allProjects"
                onChange={() => null}
                value=""
              />
            </Grid>
            <Grid item>
              <GrayRectButton>Approve All</GrayRectButton>
            </Grid>
          </Grid>
        </Grid>
      </div>
      <div>
        <div className={classes.table}>
          <DataGrid
            rows={rows}
            columns={columns}
            pageSize={9}
            checkboxSelection
            className={classes.tableContianer}
            filterModel={{
              items: (
                {
                  columnField: "status",
                  operatorValue: "contains",
                  value: valueType
                }
              )
            }}
            getRowClassName={(params) =>
              params.id % 2 === 0 ? "even-row" : null
            }
            getCellClassName={(params) =>
              params.id % 2 === 0 ? "even-row-cells" : "even-row-cells"
            }
            components={{
              Pagination: CustomPagination
            }}
          />
        </div>
      </div>
    </Grid>
  );
}

Can anyone help me with this. I am new to ReactJS in learning mode. Thanks