Почему xState не работает с реакцией Redux?

Я пытаюсь изменить статус кнопки, когда пользователь нажимает, это все часть xstate, куда попадают кнопки, в соответствии с состоянием кнопка будет работать. в машинописи, она работает нормально, но не в реагирующих хуках

const ProjectStatus = {
  UN_ASSIGNED: 'UN_ASSIGNED',
  ASSIGNED: 'ASSIGNED',
  CHECKED_OUT: 'CHECKED_OUT',
  CHECKED_IN: 'CHECKED_IN',
  QC_START: 'QC_START',
  QC_FAIL: 'QC_FAIL',
  QC_PASS: 'QC_PASS',
  CUSTOMER_REVIEW: 'CUSTOMER_REVIEW',
  CUSTOMER_REJECT: 'CUSTOMER_REJECT',
  RE_ASSIGN: 'RE_ASSIGN',
  HOLD: 'HOLD',
  DONE: 'DONE',
  CUSTOMER_APPROVE: 'CUSTOMER_APPROVE'
};
function MachineButton() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const params = useParams();
  const [anchorEl, setAnchorEl] = useState(false);
  const [current, send] = useState({ ...ProjectStatus });


  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const projectEntity = useSelector((states) => (states.taskDetails.entity));

  useEffect(() => {
    dispatch(getTaskById(params.id));
  }, []);
  const toggleMachine = (currentState, action) => {
    const nextState = machine.transition(currentState, action);
    if (currentState !== nextState.value) {
      send(ProjectStatus[nextState.value]);
      dispatch(updateTask({ ...projectEntity }));
    }
  };

  const getButton = (currentState) => {
    if (currentState !== undefined) {
      const nextStates = machine.states[currentState].on;
      if (Object.keys(nextStates).length !== 0) {
        return (
          <div>
            <Button
              color="primary"
              variant="contained"
              aria-controls="simple-menu"
              aria-haspopup="true"
              onClick={handleClick}
            >
              {Object.keys(nextStates)[0]}
            </Button>
            <Menu
              id="lock-menu"
              anchorEl={anchorEl}
              keepMounted
              getContentAnchorEl={null}
              open={Boolean(anchorEl)}
              onClose={handleClose}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'center',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center',
              }}
            >
              {Object.keys(nextStates).map((action, index) => (
                <MenuItem
                  key={action}
                  selected={index === currentState}
                  onClick={() => toggleMachine(currentState, action)}
                >
                  {action}
                </MenuItem>
              ))}
            </Menu>

          </div>


        );
      }
    }
  };
  return (
    <div className={classes.actions}>
      {getButton(projectEntity.status)}
    </div>


  );
}


export default MachineButton;

Я получаю статус undefined, но когда я перезагружаю кнопку, значения обновляются

это ошибка, которую я получаю.

 TypeError: Cannot read property 'status' of undefined
 181 | 
  182 | 
  183 | return (
> 184 |   <div className={classes.actions}>
      | ^  185 |     {getButton(projectEntity.status)}
  186 |   </div>
  187 | 

Я что-то упустил, исправьте, пожалуйста, что еще нужно