How to bind checkbox value with text input reactjs

How can I create another array based on the existing array to handle checkbox events?

I'm trying to handle checked on checkbox without affecting the value in the array.

This is the function that handles when I checkbox

const fieldSelectOrNot = (field) => {    
        const isFieldSelected = currentValue.find(
      (f) => f.fomular_alias == field.fomular_alias
    );

    let deepCopy = structuredClone(currentValue);

    if (isFieldSelected) {
      deepCopy = deepCopy.filter(
        (f) => f.fomular_alias != field.fomular_alias
      );
      console.log("lefend", deepCopy, currentValue)

    } else {
      deepCopy.push({...field});
    }

    updateSelectedComponent(deepCopy, splittedPath);
  };

 <td className="record-prop">
                      <input type="checkbox"
                        checked={
                        fomularAliases.indexOf(field.fomular_alias) !== -1
                        }
                        onClick={() => {
                          fieldSelectOrNot(field);
                        }}/>
                    </td>

here is my input text

here is my display table

Currently the status of checked is showing, I want to ask how can I click on the checkbox, will it delete the element in the deepCopy array without affecting the main array? and I will rely on the deepCopy array to update the display in the table when clicking on the checkbox. Elements that exist and do not currently exist will not be displayed based on the order in which I checkbox the elements that I entered from the input text.