In my react application I have a dynamic object called statusFilters which holds multiple variables. I wanted this object state value to be empty when I click a button. Here is my code.

ObjectList (minimal code)

function ObjectList({
  search,
  setSearch,
  trackingObjects,
  loading,
  error,
  selectedObj,
  setSelectedObj,
  statusFilters,
  setStatusCheckboxFilters,
  setStatusFilters,
}) {
  const handleClick = React.useCallback((obj) => {
    setSelectedObj(obj);
  }, []);
  console.log(statusFilters, "dynamic objects");

  const resultObjs = filterSearch(
    filterObjects(trackingObjects, statusFilters),
    search
  );

  const [res, setReset] = useState(false);
  const reset = () => setReset(!setStatusFilters);
  const objsWithLocations = resultObjs.filter(
    ({ location }) =>
      location?.[0] !== null &&
      location?.[0] !== undefined &&
      location?.[1] !== null &&
      location?.[1] !== undefined
  );

  const defaultFilterState = useMemo(
    () => makeDefaultFilterState(trackingObjects),
    [trackingObjects]
  );
  const filterOptionsObj = useMemo(
    () => makeFilterOptionsObj(trackingObjects),
    [trackingObjects]
  );
  const resetAllFilters = () => {
    setStatusFilters([]);
  };
  const filterHandler = (e) => {
    setStatusFilters({ ...statusFilters, [e.target.name]: e.target.checked });
  };

  const discardFilters = () => {
    setStatusFilters([]);
  };
}

Button to reset statusFilters object to null.

<Button
            variant="text"
            text="Reset"
            sx={{
              fontSize: "24px",
              p: 0,

              verticalAlign: "baseline",
              ml: "6px",
              textTransform: "none",
            }}
            onClick={() => resetAllFilters()}
          />

But when I click on Reset button I got TypeError: statusFilters is not a function at resetAllFilters error. How can I fix this issue?

Here is the console log output of statusFilters object