The setCheck runs asyncranously. So in the function handleOnChange, right after setCheck(!check), check's value has not been set to the new value yet.

You could use an effect here since you want the side-effect of changing data from changing check. This way, whenever check is done changing, the effect triggers:

const handleOnChange = () => {
    setCheck(!check);
};
useEffect(() => {
  check &&
      setData((previous) => [...previous, { name: "amazon", phone: 222 }]);
}, [check]);

Updated sandbox: https://codesandbox.io/s/quirky-rain-hmhkk

There is no need of using two states, that solution will give you more problems when you want to add more options.

I would go for an approach similar to this one:

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

const localData = [{ name: "apple", phone: 12345 }];
const extraData = [{ name: "amazon", phone: 222 }];

export default function App() {
  const [data, setData] = useState(localData);

  const handleOnChange = (item) => {
    if (!data.find(({ name }) => name === item.name)) setData([...data, item]);
    else setData(data.filter(({ name }) => name !== item.name));
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>
        {extraData.map((item) => {
          return (
            <input
              key={item.name}
              type="checkbox"
              checked={data.includes(({ name }) => name === item.name)}
              onChange={() => handleOnChange(item)}
            />
          );
        })}
      </p>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}

This will allow you to add more checkboxes in the future.

So, you want the data to be added to data when the checkbox IS checked? Just invert the condition of the ternary that you use in handleOnChange:

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>
  );
}