I am exploring the react `onChange` feature. The functionality I would like to do is
when checkbox is selected, I would like to update local data to add some value
when checkbox is unselected, I would like to just populate the original data
the code I have seems do the reverse of what I want. any can provide some guideline?

[codesandbox](https://codesandbox.io/s/pensive-breeze-w259y?file=/src/App.js)

```
import "./styles.css";
import { useState } from "react";

export default function App() {
  const localData = [{ name: "apple", phone: 12345 }];
  const [check, setCheck] = useState(false);
  const [data, setData] = useState(localData);
  const handleOnChange = () => {
    setCheck(!check);
    check ? setData([...data, { name: "amazon", phone: 222 }]) : setData(data);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>
        <input type="checkbox" check onChange={handleOnChange}></input>
      </p>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

```