How to get filtered data from multiple checkboxes in react

I am fetching data from Api and based on api data I am filtering data when I click checkbox and the required data could be retrived i.e filtered data from one checkbox if I click and if I click another checkbox all of data disappears .I want to get all the filtered data which I clicked .Below is my code

import React, { useEffect, useState } from 'react'

const Filter = () => {
    const [posts, setPosts] = useState([])

    useEffect(() => {
        filterData()
    }, [])
    const filterData = async () => {
        const res = await fetch("https://jsonplaceholder.typicode.com/posts")
        const data = await res.json()
        setPosts(data)
        console.log("posts", posts)
    }

    const handleClick = (e, userId) => {
        const { value, checked } = e.target
        console.log(userId, "userId")
        console.log(value, "val")
        if (checked) {
            const filterData = posts.filter((item) => item.userId === userId)

            setPosts(filterData)
        }
        else {
            filterData()
            //  const filterDat = posts.filter((e) => e === value)
            // setPosts(filterDat)
        }
    }
    return (
        <div>
            <h2>Filter data</h2>
            <label>Userid1</label>
            <input type="checkbox" value='a' name='filter' onClick={(e) => handleClick(e, 1)} />
            <label>Userid2</label>
            <input type="checkbox" value='b' name='filter' onChange={(e) => handleClick(e, 2)} />
            <label>Userid3</label>
            <input type="checkbox" value='c' name='filter' onChange={(e) => handleClick(e, 3)} />
            <label>Userid4</label>
            <input type="checkbox" value='d' name='filter' onChange={(e) => handleClick(e, 4)} />
            <label>Userid5</label>
            <input type="checkbox" value='e' name='filter' onChange={(e) => handleClick(e, 5)} />
            <label>Userid6</label>
            <input type="checkbox" value='f' name='filter' onChange={(e) => handleClick(e, 6)} />
            <label>Userid7</label>
            <input type="checkbox" value='g' name='filter' onChange={(e) => handleClick(e, 7)} />
            <label>Userid8</label>
            <input type="checkbox" value='h' name='filter' onChange={(e) => handleClick(e, 8)} />
            <label>Userid9</label>
            <input type="checkbox" value='i' name='filter' onChange={(e) => handleClick(e, 9)} />
            <label>Userid10</label>
            <input type="checkbox" value='j' name='filter' onChange={(e) => handleClick(e, 10)} />

            {posts.map((item) => (

                <div key={item.id}>
                    <div>{item.userId} ---- {item.title}</div>
                    <hr />
                    <div>{item.body}</div>
                </div>
            ))}
            <hr />

        </div>
    )
}

export default Filter

I want get filtered data based on all checkboxes