React hooks synchronise two arrays

I have a function that gives me an array of strings who depends if checkboxes are checked or not.

I want to fill another array with hooks method like so

const [firstArray, setFirstArray] = useState([]);
...
const myFunction = (array) => {
    // array like so => [firstString, secondString, etc..]
    array.forEach(arr => {
        setFirstArray([...firstArray, ...arr])
        // if function array change i want to filter firstArray
        if(??){
            setFirstArray(
                firstArray.filter(check => check !== arr)
            )
        }
    }
    
}

which way is the best ?

Solution 1:

You just should update your state whenever the onChange function is triggered:

const App = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const onChange = (checkedValues) => {
    setSelectedOptions(checkedValues);
  };

  return (
    <div className="App">
      <Checkbox.Group
        options={options}
        defaultValue={selectedOptions}
        onChange={onChange}
      />
    </div>
  );
};