Как отправить текст из поля ввода в поле массива в базе данных с помощью React

Question

У меня есть форма на переднем крае в React. Моя таблица БД имеет поле, которое является массивом с именем previous_roles. Мы хотим использовать форму для отправки запроса в базу данных для добавления предыдущих ролей в массив. На данный момент это не будет работать, потому что я отправляю его как текст, а БД ожидает массив.

Как правильно отправить запрос? Позже с нашим запросом на исправление, как мы можем добавить к этому массиву, используя нашу форму на внешнем интерфейсе?

Форма на внешнем интерфейсе использует ловушку useReducer React.

Текущий код:

const initialState = {
  first_name: "",
  surname: "",
  aboutme: "",
  job_title: "",
  company_id: 0,
  salary: "",
  start_date: "",
  previous_roles: [""],
  cohort_num: 0,
  region: "",
  job_satisfaction: "",
  new_job: "",
  twitter: "",
  github: "",
  portfolio: "",
  linkedIn: "",
};
function reducer(state, action) {
  switch (action.type) {
    case "first_name":
      return { ...state, first_name: action.payload };
    case "surname":
      return { ...state, surname: action.payload };
    case "aboutme":
      return { ...state, aboutme: action.payload };
    case "job_title":
      return { ...state, job_title: action.payload };
    case "company_id":
      return { ...state, company_id: action.payload };
    case "salary":
      return { ...state, salary: action.payload };
    case "start_date":
      return { ...state, start_date: action.payload };
    case "previous_roles":
      return { ...state, previous_roles: action.payload };
    case "cohort_num":
      return { ...state, cohort_num: action.payload };
    case "region":
      return { ...state, region: action.payload };
    case "job_satisfaction":
      return { ...state, job_satisfaction: action.payload };
    case "new_job":
      return { ...state, new_job: action.payload };
    case "twitter":
      return { ...state, twitter: action.payload };
    case "github":
      return { ...state, github: action.payload };
    case "portfolio":
      return { ...state, portfolio: action.payload };
    case "linkedIn":
      return { ...state, linkedIn: action.payload };
    default:
      throw new Error();
  }
}

function ProfileInputs() {
  const [state, dispatch] = useReducer(reducer, initialState);

    function handleClick(e) {
      const {first_name, surname, aboutme, job_title, company_id, salary, start_date, previous_roles, cohort_num, region, job_satisfaction, new_job, twitter, github, portfolio, linkedIn } = state;
      e.preventDefault();
      fetch(`http://localhost:5000/bootcampers`, {
        method: "POST",
        body: JSON.stringify({ first_name, surname, aboutme, job_title, company_id, salary, start_date, previous_roles, cohort_num, region, job_satisfaction, new_job, twitter, github, portfolio, linkedIn }),
        headers: {
          "Content-Type": "application/json"
        }
    },

    )}

это фрагмент из ввода

 <label>
          Previous Roles:
          <input
            type="text"
            placeholder="Previous Roles"
            name="previous_roles[]"
            value={state.previous_roles}
            onChange={(event) => {
              dispatch({
                type: "previous_roles",
                payload: event.target.value,
              });
            }}
          />
        </label>