Axios PUT not working to update record in React form with Typescript

I have a React formt that I am attempting to use to update a record. My back-end team had supplied me with an API that I have see work to create a record using Postman, but when I try to use and Axios PUT, I first get the error:

PUT http:// … /updateRecord/undefined

react_devtools_backend.js:2655 Unhandled Promise rejection: Request failed with status code 400 ; Zone: ; Task: Promise.then ; Value: AxiosError {message: ‘Request failed with status code 400’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …} undefined

then this 409 error:

PUT http:// … /updateRecord/(item id)

react_devtools_backend.js:2655 Unhandled Promise rejection: Request failed with status code 409 ; Zone: ; Task: Promise.then ; Value: AxiosError {message: ‘Request failed with status code 409’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …} undefined

I don’t know why the update isn’t working. I am also having a similar issue creating a record with a POST request, but I do not get any console errors and the record does not get create. I assume whatever I have wrong on this form is happening on that form as well. My form validation it working just fine, but I included it here for reference.

Right now I have a very basic Axios PUT written, but eventually want to add error handling and the ability to display a confirmation message.

DepartmentEdit.tsx

export function DepartmentEdit(props) {
    const { closeModal, refreshTable, selectedRecord,  ltUpdateUrl } = props;

    const validate = (fieldValues = values) => {   // these will need to be customized to required fields per table
        const temp = { ...errors };
        if ('name' in fieldValues)
            { temp.name = fieldValues.name ? '' : 'Department Name is required.'; }
        if ('description' in fieldValues)
            { temp.description = fieldValues.description ? '' : 'Description is required.'; }
        setErrors({
            ...temp
        });
        if (fieldValues === values)
            { return Object.values(temp).every(x => x === ''); }
    };

    const {
        errors,
        setErrors,
        handleInputChange,
        values,
        setValues,
    } = FormFunctions(initialValues, true, validate);

    React.useEffect(() => {
        if (selectedRecord !== null)
            {setValues({
                ...selectedRecord
        }); }
    }, [selectedRecord, setValues]);

   const curValue = values.isArchived === 1 ? false : true; 


// PUT Request
   async function editRecord(values: any) {
        await axios.put(`${ltUpdateUrl + (values.id)}`, {
            title: 'Success',
            body: 'The record had been successfully updated'
        });
        refreshTable();
    }

    const handleSubmit = e => {
        e.preventDefault();
        if (validate()){
          editRecord(selectedRecord);
          closeModal();
        }
    };

    return (
      <Form onSubmit={handleSubmit} >
          <Grid container spacing={0}>
              <Grid item md={8}>
                  <Controls.Input
                      type='text'
                      onChange={handleInputChange}
                      label='Department Name'
                      name='name'
                      value={values.name !== null ? values.name : ''}
                      error={errors.name}
                  />
              </Grid>
              <Grid item md={4}>
                  <Controls.ToggleSwitch
                      label1='Inactive'
                      label2='Active'
                      curValue={curValue}
                      value={values.isArchived}
                  />
              </Grid>
              <Grid item md={12}>
                  <Controls.Input
                      type='text'
                      onChange={handleInputChange}
                      label='Description'
                      name='description'
                      value={values.description !== null ? values.description : ''}
                      error={errors.description}
                  />
              </Grid>
          </Grid>
          <Grid>
                 <Controls.Button
                      type='submit'
                      text='Submit'
                      onClick={editRecord}
                  />
                  <Controls.Button
                      text='Cancel'
                      color='default'
                      onClick={closeModal}
                  />
          </Grid>
      </Form>
    );
}

FormFunctions.tsx

export function FormFunctions(initialValues, validateOnChange = false, validate) {
    const [values, setValues] = React.useState({} as any);
    const [errors, setErrors] = React.useState({} as any);

    const handleInputChange = e => {
        const { name, value } = e.target;
        setValues({
            ...values,
            [name]: value
        });
        if (validateOnChange)
          { validate({ [name]: value }); }
    };

    const resetForm = () => {
      setValues(initialValues);
      setErrors({});
    };
    return {errors, handleInputChange, resetForm, setErrors, setValues, values};
}

export function Form(props) {
    const classes = useFormStyles();
    const { children, ...other } = props;
    return (
        <form className={classes.root} autoComplete='off' {...other}>
            {props.children}
        </form>
    );
}

Not sure if this is my issues, but the value I am being passed for isArchived is 1/0 rather than True/False (the backend team is working to change that). That is why I have the CurValue variable to display the value in the checkbox.