filtering using checkboxes in react typescript using react hooks

I am trying to filter the data I created by specific string word. I am making an event based app and want to filter data using checkbox based on location. Location is either "Online" or specific place (random name).

My if function goes directly to "else" statement (I get console.log test2). It also only gives me that console log if I click on "Online" checkbox. When I click on "Onsite" checkbox nothing registers at all. I am not sure what am I doing wrong.

I am also not sure what condition to use to get onsite data filtered since all places have different names.

This is first time I am encountering with React TypeScript combination and I am getting a lot of hiccups along the way.

Here is the code from ResultFilter.ts file:

import { useState } from 'react'
import '../App.css'
//import { EventActivity } from '../model/Event'

/* 
interface Props {
    activity: EventActivity
  } */

const ResultFilter = (EventActivity: { location: string }) => {

    // const [filtered, setFiltered] = useState(String)

    const [Checked, setChecked] = useState<any[]>([])

    const handleCheckboxChange = () => {
        console.log('test');
        
        const PATTERN = 'Online'

         if (EventActivity.location === PATTERN) {

             const filteredData = Checked.filter((str)=>{
                 return str.toLowerCase().includes(PATTERN)
             });
             console.log(filteredData);
             console.log('filtered data')
             
            setChecked(filteredData)

        } else  {
            console.log('test2');            
            
        }
    }

    return (
        <div className="filter-container">
            <div className="filter-wrapper">
                <div className="checkbox">
                    <label>
                        <input
                            type="checkbox"                             
                            onChange={()=>handleCheckboxChange}
                            
                        />
                        <span>Onsite</span>
                    </label>

                    <label>
                        <input
                            type="checkbox"
                        /* checked={checked} */
                        onChange={handleCheckboxChange}
                        />
                        <span>Online</span>
                    </label>
                </div>

            </div>
        </div>
    )
}
export default ResultFilter

This is model Event.tsx:

export interface EventActivity {
    id: number
    title: string 
    description: string
    imgUrl: string 
    date: string
    location: string     
  }

This is CardGrid.tsx file which displays all events where ResultFilter.tsx is displayed:

import FrontCard from "./FrontCard"
import { EventActivity } from '../model/Event'
import ResultFilter from "./ResultFilter"

const data: EventActivity[] = [
  {
    id: 1,
    title: 'Yoga',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    imgUrl: 'https://images.unsplash.com/photo-1588286840104-8957b019727f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    date: "Mon,FEB 1 @1:00 AM CET",
    location: 'Kellers Park'
  },
  {
    id: 2,
    title: 'Hiking',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    imgUrl: 'https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    date: "Wed,MAR 5 @12:00 AM CET",
    location: 'Delsjön'
  },
  {
    id: 3,
    title: 'Photography',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    imgUrl: 'https://images.unsplash.com/photo-1554048612-b6a482bc67e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    date: "Mon,FEB 12 @9:00 AM CET",
    location: 'Brunnsparken'
  },
  {
    id: 4,
    title: 'Connect!',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    imgUrl: 'https://images.unsplash.com/photo-1539635278303-d4002c07eae3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    date: "Fri,APR 3 @5:00 PM CET",
    location: 'Gothenburg'
  },
  {
    id: 5,
    title: 'Gamers unite!',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    imgUrl: 'https://images.unsplash.com/photo-1544652478-6653e09f18a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    date: "Mon,DEC 1 @1:00 AM CET",
    location: 'Online'
  },
  {
    id: 6,
    title: 'Book Club',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
    imgUrl: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    date: "Sun,NOV 1 @2:00 PM CET",
    location: 'Online'
  },
]

interface Props {
  searchString: string
}

const CardGrid = ({ searchString }: Props) => {
  const filteredData = data.filter(activity => activity.title.toLowerCase().includes(searchString.toLowerCase()))

  return (

    <>
      <h4 className="events-title" >Events</h4>


      <section data-testid="filter-events" className="filter-events">
        
          <ResultFilter location={""} />
        
    </section>


      <section data-testid="all-events" className="card-grid">
        {filteredData.map(activity => (
          <FrontCard key={activity.id} activity={activity} />
        ))}
      </section>
    </>
  )
}

export default CardGrid