Filter fetched data with checkbox in react

I have fetched data from the json file.

I made the elements in which they are fetched, now I have to make checkboxes to filter these elements.

< Header /> - here I plan to do checkboxes for filtering.
< Main /> - here I have made elements that I would like to filter.

I have no idea how to go about it, in addition, I cannot map the data with tags to the checkboxes because they are repeated.

Json looks something like this :

[
{
    "id": "101",
    "title": "xyz",
    "tags": ["tag3", "tag1"]
  },
{
    "id": "102",
    "title": "xyz",
    "tags": ["tag1", "tag2"]
  },
{
    "id": "103",
    "title": "xyz",
    "tags": ["tag2", "tag4"]
  },
]

import { useState, useEffect } from 'react'
import Main from '../components/Main'
import Header from '../components/Header'
import Margins from '../components/Margins'

const Page = () => {
  const [data, setData] = useState([])

  const getData = () => {
    fetch('data.json', {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    })
      .then(function (response) {
        console.log(response)
        return response.json()
      })
      .then(function (myJson) {
        console.log(myJson)
        setData(myJson)
      })
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <Margins>
      <Header data={data} />
      <Main data={data} />
    </Margins>
  )
}

export default Page