Реакция: как исправить сбой действия отправки для запроса POST

Question

В моем приложении response / redux у меня есть компонент Modal для добавления новых записей в компонент Table. После заполнения формы Modal и нажатия кнопки Create ничего не происходит, вместо этого в моем Redux DevTools появляется сообщение об ошибке

Это поле обязательно для заполнения.

Я предполагаю, что переданные данные не передаются в запрос POST api в файле action . Мой способ не работает.

Модальный компонент

const AddInvoiceModal = (props) => {
  const [formData, setFormData] = useState({
    invoiceOwner: "",
    product: "",
    quantity: ""
  });

  const {
    invoiceOwner,
    product,
    quantity
  } = formData;


  const onChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

    return (
      <div className="App container">
        <Modal isOpen={props.newInvoiceModal} scrollable={true}>
          <ModalHeader toggle={props.toggleModal}>Add Invoice</ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label for="title">Name</Label>
              <Input
                id="name"
                name="invoiceOwner"
                value={invoiceOwner}
                onChange={(e) => onChange(e)}
              />
            </FormGroup>
            <FormGroup>
              <Label for="title">Product</Label>
              <Input
                id="product"
                name="product"
                value={product}
                onChange={(e) => onChange(e)}
              />
            </FormGroup>
            <FormGroup>
              <Label for="title">Quantity</Label>
              <Input
                id="quantity"
                name="quantity"
                value={quantity}
                onChange={(e) => onChange(e)}
              />
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={props.addInvoiceData(formData)}>
              Create     <==== CREATE BUTTON
            </Button>{" "}
            <Button color="secondary" onClick={props.toggleModal}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );

}

export default AddInvoiceModal;

Таблица компонент

import AddInvoiceModal from './AddInvoiceModal'
import {getInvoiceData,toggleModal,addInvoiceData} from "../../actions/customers/invoice";

const InvoiceTable = (props) => {
  const invoiceData = useSelector((state) => state.invoice.invoiceData);
  const newInvoiceModal = useSelector((state) => state.invoice.newInvoiceModal);  
  const dispatch = useDispatch(); 

  useEffect(() => {
    dispatch(getInvoiceData());
  }, [dispatch]);
  

  const classes = useStyles();

  const columns = [
    { name: "date", label: "Date" },
    { name: "invoiceOwner", label: "Name" },
    { name: "invoiceNo", label: "Invoice No" },
    { name: "product", label: "Product" },
    { name: "quantity", label: "Quantity" },
  ];

  return (
    <div className={classes.root}>
      {/* ADD NEW EMPLOYEE MODAL */}
      <AddInvoiceModal
        toggleModal={() => dispatch(toggleModal())}
        addInvoiceData={() => dispatch(addInvoiceData())}
        newInvoiceModal={newInvoiceModal}
        invoiceData={invoiceData}
      />

      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={
                <Fragment>
                  Purchase Invoice
                  <Tooltip title="Add">
                    <AddBoxIcon
                      color="action"
                      style={addIcon}
                      onClick={() => dispatch(toggleModal())} <===== MODAL TRIGGER
                    />
                  </Tooltip>
                </Fragment>
              }
              data={invoiceData}
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

InvoiceTable.propTypes = {
  invoiceData: PropTypes.object.isRequired,
  getInvoiceData: PropTypes.func,
  toggleModal: PropTypes.func,
  addInvoiceData: PropTypes.func,
  newInvoiceModal: PropTypes.bool,
};

export default InvoiceTable;

// ACTION file
import API from "../api";  <=== AXIOS INTERCEPTORS 

export const addInvoiceData = (data) => async (dispatch) => {
  await API.post("/clients/invoice/", data)
    .then((res) => {
      dispatch(createMessage({ addInvoiceData: "Invoice detail added" }));
      dispatch({
        type: ADD_INVOICE_DATA,
        payload: res.data,
      });
       dispatch({
         type: TOGGLE_MODAL,
       });
    })
    .catch((err) =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
};

// Reducer
const initialState = {
  invoiceData: [],
  newInvoiceModal: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case TOGGLE_MODAL:
      return {
        ...state,
        newInvoiceModal: !state.newInvoiceModal
      };


    case GET_INVOICE_DATA:
      return {
        ...state,
        invoiceData: action.payload,
      };

    case ADD_INVOICE_DATA:
      return {
        ...state,
        invoiceData: action.payload,
      };

    default:
    case DELETE_INVOICE_DATA:
      return state;
  }
}