I'm trying to get the updated/newly created records and send it to the backend in "queryparam"

import React, { useState, useEffect } from "react";
//import { Container, Row, Col } from "reactstrap";
// import Box from "@mui/material/Box";
// import "bootstrap/dist/css/bootstrap.css";
// import "./index.css";

const Index = () => {
  const [formValues, setFormValues] = useState([
    { orderno: 0, inputValue1: "", inputValue2: "", checked: false }
  ]);

  const [isDisabled, setDisabled] = useState(false);
  // const [inputVal1, setInputval1] = useState();
  const [isChanged, setIsChanged] = useState([]);
  const [error, setError] = useState(false);

  const [orderNumber, setOrderNumber] = useState(1);

  const addFormFields = () => {
    // if (error) {
    //   setDisabled(false)
    // }
    // else {
    //   setDisabled(true)
    // }

    setFormValues((prevState) => [
      ...prevState,
      {
        orderno: orderNumber,
        inputValue1: "",
        inputValue2: "",
        checked: false
      }
    ]);
    setOrderNumber((prev) => prev   1);
  };

  const removeFormFields = (i) => {
    let newFormValues = [...formValues];
    newFormValues.splice(i, 1);

    setFormValues(newFormValues);
    setOrderNumber((prev) => prev - 1);
  };

  const onChangeFieldValue = (index, key, value) => {
    setFormValues((prevState) => {
      let copyState = [...prevState];
      if (value?.length > 0) {
        setError(false);
      } else {
        setError(true);
      }

      copyState[index][key] = value;

      return copyState;
    });
  };

  const saveFields = (e) => {
    const queryparam = {
      inputData: formValues
    };
    setIsChanged(queryparam);
    setIsChanged((prevState, nextState) => {
      let copyState = [];
      if (prevState === nextState) {
        copyState = [...prevState];
      } else {
        copyState = [...nextState];
      }
      return copyState;
    });
    console.log(isChanged, "lllllllll");
  };

  // useEffect(() => {
  //    saveFields()
  // }, [isChanged])

  return (
    <>
      {formValues.map((element, index) => (
        <div className="form-inline" key={index}>
          {/* <Container>
            <Row>
              <Col xs="12" sm="6"> */}
          <label>{index   1}</label>

          <input
            type="text"
            value={element.inputVal1}
            onChange={(e) =>
              onChangeFieldValue(index, "inputValue1", e.target.value)
            }
          />
          <input
            type="text"
            value={element.inputVal2}
            required
            onChange={(e) =>
              onChangeFieldValue(index, "inputValue2", e.target.value)
            }
          />
          {/* </Col>

              <Col xs="12" sm="6">
                <Box> */}
          <button
            className={`button ${error ? "add" : "btn-secondary"}`}
            type="button"
            disabled={error}
            onClick={(e) => addFormFields(e)}
          >
            Add{console.log(isDisabled, "ooooooo", error)}
          </button>

          <button
            type="button"
            className="button remove"
            onClick={() => removeFormFields(index)}
          >
            Remove
          </button>
          {/* </Box>
              </Col>
            </Row>
          </Container> */}
        </div>
      ))}
      {/* <Row>
        <Col sm="6" md={{ size: 4, offset: 2 }}>
          <Box> */}
      <button
        type="button"
        className="button save"
        onClick={(e) => saveFields(e)}
      >
        Save
      </button>
      <button
        type="button"
        className="button remove"
        //onClick={(e) => cancelFields(e)}
      >
        cancel
      </button>
      {/* </Box>
        </Col>
      </Row> */}
    </>
  );
};

export default Index;