Не обновляются данные в компоненте после создания новой записи

Не могу понять уже 2 день. Что я делаю не так. Я пытаюсь создать новую запись, данные улетают на сервер и записывают их в базу, и отправляет мне созданный объект я его в свою очередь добавляю в массив в стейте(пересоздаю массив старый + новый элемент). И дальше ничего не происходит( Почему новая запись не приходит обратно. Вот мой код компонента:

import React, { useState, useCallback } from "react";
import { useTheme, fade, makeStyles } from "@material-ui/core/styles";
import Popper from "@material-ui/core/Popper";
import CloseIcon from "@material-ui/icons/Close";
import DoneIcon from "@material-ui/icons/Done";
import Autocomplete from "@material-ui/lab/Autocomplete";
import InputBase from "@material-ui/core/InputBase";
import { useSelector, useDispatch } from "react-redux";
import * as actions from "../../store/projectCheckType/actions";
import { useToasts } from "react-toast-notifications";

const Card = ({ projectId, month, year }) => {
  const checks = useSelector((state) => state.checkType.list);
  const dispatch = useDispatch();
  const projectChecks = useSelector((state) => state.projectChecks.list);
  console.log("Project Checks");
  console.log(projectChecks);

  const [value, setValue] = useState(
    findCheck(month, year, projectId, checks, projectChecks).check
  );
  const [sentValue, setSentValue] = useState(
    findCheck(month, year, projectId, checks, projectChecks)
  );
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = useState(null);
  const [pendingValue, setPendingValue] = useState(null);
  const theme = useTheme();
  const [open, setOpen] = useState(false);
  const labels = [defaultValue, ...checks];

  const { addToast } = useToasts();

  const getColor = (name) => {
    switch (name) {
      case "THC":
        return { color: "#ffb800" };
      case "Cons":
        return { color: "#ff3747" };
      case "PHC":
        return { color: "#85cd12" };
      case "PP":
        return { color: "#2494cc" };
      default:
        return { color: "#FFFFFF" };
    }
  };
  const handleClick = (event) => {
    console.log(sentValue);
    setOpen(true);
    setPendingValue(value);
    setAnchorEl(event.currentTarget);
  };

  const handlerCreate = useCallback(
    (data) => {
      dispatch(actions.create(data));
    },
    [dispatch]
  );

  const handlerUpdate = useCallback(
    (id, data) => {
      dispatch(actions.update(id, data));
    },
    [dispatch]
  );

  const handleClose = (event, reason) => {
    if (reason === "toggleInput") {
      return;
    }
    setOpen(false);
    const checkData = pendingValue.id !== undefined ? pendingValue.id : 0;
    setValue(pendingValue);

    if (anchorEl) {
      anchorEl.focus();
    }
    setAnchorEl(null);

    if (sentValue.id === 0 && pendingValue.id !== 0) {
      console.log("create");
      let sent = sentValue;
      sent.checkTypeId = checkData;
      setSentValue(sent);
      handlerCreate(sentValue);
    }
    if (
      sentValue.id !== 0 &&
      pendingValue.id !== 0 &&
      sentValue.checkTypeId !== pendingValue.id
    ) {
      console.log("update");
      let sent = sentValue;
      sent.checkTypeId = checkData;
      setSentValue(sent);
      handlerUpdate(sentValue.id, sentValue);
    }
  };

  const id = open ? "label" : undefined;

  return (
    <React.Fragment>
      <div
        style={{ width: "100%" }}
        className={classes.root}
        onClick={handleClick}
      >
        <div
          key={`${sentValue.id}-${sentValue.month}-${sentValue.year}`}
          className={classes.tag}
          style={{
            backgroundColor: getColor(value.shortName).color,
            color: theme.palette.getContrastText(
              getColor(value.shortName).color
            ),
          }}
        >
          {value.shortName}
        </div>
      </div>
      <Popper
        id={id}
        open={open}
        anchorEl={anchorEl}
        placement="bottom-start"
        className={classes.popper}
      >
        <div className={classes.header}>Choose check to this project</div>
        <Autocomplete
          open
          onClose={handleClose}
          classes={{
            paper: classes.paper,
            option: classes.option,
            popperDisablePortal: classes.popperDisablePortal,
          }}
          value={pendingValue}
          onChange={(event, newValue) => {
            setPendingValue(newValue);
          }}
          getOptionSelected={(option, value) =>
            option.shortName === value.shortName
          }
          disableCloseOnSelect
          disablePortal
          noOptionsText="No labels"
          renderOption={(option, { selected }) => (
            <React.Fragment>
              <DoneIcon
                className={classes.iconSelected}
                style={{ visibility: selected ? "visible" : "hidden" }}
              />
              <span
                className={classes.color}
                style={{ backgroundColor: getColor(option.shortName).color }}
              />
              <div className={classes.text}>
                {option.shortName}
                <br />
                {option.fullName}
              </div>
              <CloseIcon
                className={classes.close}
                style={{ visibility: selected ? "visible" : "hidden" }}
              />
            </React.Fragment>
          )}
          options={[...labels]}
          getOptionLabel={(option) => option.shortName}
          renderInput={(params) => (
            <InputBase
              ref={params.InputProps.ref}
              inputProps={params.inputProps}
              autoFocus
              className={classes.inputBase}
            />
          )}
        />
      </Popper>
    </React.Fragment>
  );
};

export default Card;


const getCheck = (checkTypeId, checks) => {
  let check =
    checkTypeId === 0
      ? { id: 0, shortName: "", fullName: "" }
      : checks.find((x) => x.id === checkTypeId);
  return check;
};

const getInitData = (
  month,
  year,
  projectId,
  id,
  checkTypeId,
  description,
  check
) => {
  return { month, year, projectId, id, checkTypeId, description, check };
};

const findCheck = (month, year, projectId, checks, projectsChecksTypes) => {
  let search = projectsChecksTypes.find(
    (x) =>
      new Date(x.checkedAt).getFullYear() === year &&
      new Date(x.checkedAt).getMonth() + 1 === month &&
      x.projectId === projectId
  );

  return search === undefined
    ? getInitData(month, year, projectId, 0, 0, "", getCheck(0, checks))
    : getInitData(
        new Date(search.checkedAt).getMonth() + 1,
        new Date(search.checkedAt).getFullYear(),
        projectId,
        search.id,
        search.checkTypeId,
        search.description,
        getCheck(search.checkTypeId, checks)
      );
};

const defaultValue = {
  id: 0,
  shortName: "",
  fullName: "",
};

Actions:

export const create = (data, onSuccess) => (dispatch) => {
  dispatch({ type: ACTION_TYPES.CREATE_PROJECT_CHECKS_REQUEST });
  createData(name, data)
    .then((response) => {
      if (response.status === 200) {
        dispatch({
          type: ACTION_TYPES.CREATE_PROJECT_CHECKS_SUCCESS,
          payload: response.data,
        });
        onSuccess();
      } else {
        dispatch({
          type: ACTION_TYPES.CREATE_PROJECT_CHECKS_FAILED,
          payload: [response.status, response.statusText],
        });
      }
    })
    .catch((err) => {
      dispatch({
        type: ACTION_TYPES.CREATE_PROJECT_CHECKS_FAILED,
        payload: err,
      });
    });
};

В редакс девтуле я вижу, что новый объект прилетает в ответ и он попадает в список. Но вот данные не обновляются. Хэлпаните кто пожалуйста)