Untitled

import "./styles.css";
import { useState, React } from "react";
import axios from "axios";

export default function App() {
  const [formFields, setFormFields] = useState({
    data: [{ name: "", age: "" }],
    presentationTopic: ""
  });

  const [response, setResponse] = useState();

  const handleFormChange = (event, index) => {
    let data = [...formFields.data];
    data[index][event.target.name] = event.target.value;
    let newPresentationTopic = formFields.presentationTopic;
    let newForm = {
      data: data,
      presentationTopic: newPresentationTopic
    };
    setFormFields(newForm);
  };

  const submit = (e) => {
    e.preventDefault();
    console.log(formFields);
    axios({
      method: "post",
      url: "/user/12345",
      data: formFields, // you are sending body instead
      headers: {
        // 'Authorization': `bearer ${token}`,
        "Content-Type": "application/json"
      }
    }).then((response) => console.log(response), setResponse(response.data));
  };

  const addFields = () => {
    let object = {
      name: "",
      age: ""
    };
    let data = [...formFields.data, object];
    let newPresentationTopic = formFields.presentationTopic;
    let newForm = {
      data: data,
      presentationTopic: newPresentationTopic
    };
    setFormFields(newForm);
  };

  const removeFields = (index) => {
    let data = [...formFields.data];
    data.splice(index, 1);
    let newPresentationTopic = formFields.presentationTopic;
    let newForm = {
      data: data,
      presentationTopic: newPresentationTopic
    };
    setFormFields(newForm);
  };

  const handlePresentation = (e) => {
    let data = [...formFields.data];
    let newForm = {
      data: data,
      presentationTopic: e.target.value
    };
    setFormFields(newForm);
  };
  return (
    <div className="App">
      <form onSubmit={submit}>
        <input
          name="presentationTopic"
          placeholder="Presentation Topic"
          onChange={(event) => handlePresentation(event)}
          value={formFields.presentationTopic}
        />
        {formFields.data?.map((form, index) => {
          return (
            <div key={index}>
              <input
                name="name"
                placeholder="Name"
                onChange={(event) => handleFormChange(event, index)}
                value={form.name}
              />
              <input
                name="age"
                placeholder="Age"
                onChange={(event) => handleFormChange(event, index)}
                value={form.age}
              />
              <button onClick={() => removeFields(index)}>Remove</button>
            </div>
          );
        })}
      </form>
      <button onClick={addFields}>Add More..</button>
      <br />
      <button onClick={submit}>Submit</button>
      <h1>{response}</h1>
    </div>
  );
}