Filter Data between veg and non-veg using a checkbox in ReactJS

I'm working on a React project to display the data of a restaurant menu using an API.

My data in the API is in this way.

[
  {
   "Name": "Chicken pizza",
   "Category": "Pizza",
   "Type": "non-veg",
   "Price": 376,
   "id": "1"
  },
  {
   "Name": "Paneer Cheese Pizza",
   "Category": "Pizza",
   "Type": "veg",
   "Price": 350,
   "id": "2"
  }
]

In my project I'm displaying this data using a map function as below:

{data.map(item =>
  <div>
   <div className='items' key={item.id}>
     <ul>
      <li className={item.Type === 'veg' ? 'veg' : 'non-veg'}></li>
      <li>{item.Name}</li>
      <li>₹ {item.Price}</li>
      <img src='/images/pizza1.jpg'/>
      <div className='hr'></div>
     </ul>
    </div>
   </div>
)}

Now I want to show only the items with the type veg in my API using a checkbox and show all the items when the checkbox is disabled.

I want to use a state like this

const [veg, setVeg] = useState(false);

const vegOnly = () =>{
        setVeg(false);
    }

and my div for checkbox is

<label>
   <input type="checkbox" value={veg} onChange={vegOnly}/>
   Veg Only
</label>

How can I change my code in such a way that I can filter the data from veg and non-veg using a checkbox state without disturbing my code and achieve the functionality I want to add in my project.

Guide me with whatever the ideas you have that can help me in the above code.

Here is my sandbox link for further information if you need any more clarification about my doubt.

https://codesandbox.io/s/upbeat-bartik-8jpc2r?file=/src/App.js

I want to use the checkbox to filter between the types veg and non-veg using a state. But don't know how to write the function for the checkbox state to filter the data.

You can do this by filtering the data. We check if vegOnly is false if so just return the data, if true return the data filtered by Type

const [data, setData] = useState([]); // initial value of []

const [vegOnly, setVegOnly] = useState(false);

const handleVegInputChange = (e) => {
  const isChecked = e.target.checked;
  setVegOnly(isChecked);
};

const filteredData =
  vegOnly === false ? data : data.filter((item) => item.Type === "veg");

Input with the new handler

<label>
   <input type="checkbox" value={veg} onChange={handleVegInputChange}/>
   Veg Only
</label>

Map over the filteredData instead the data

return (
  <>
    {filteredData.map((item) => (
      <div>
        <div className="items" key={item.id}>
          <ul>
            <li className={item.Type === "veg" ? "veg" : "non-veg"}></li>
            <li>{item.Name}</li>
            <li>₹ {item.Price}</li>
            <img src="/images/pizza1.jpg" />
            <div className="hr"></div>
          </ul>
        </div>
      </div>
    ))}
  </>
);