I'm trying to make a filter based on a Strapi relation.

My Strapi response looks like this:

I'm using Next Js for the frontend, so I assign props like so:

return {
    props: {
        projects: data.projects.data,
        categories: categoriesData.data.categories.data,
    },
}

I map through all of the project and list them all as cards. Then I want to filter them based on a button click. The buttons are the categories names and I map over that array as well. On click of each button I run a function called "handleProjects" and this is where I run into an issue.

I have previously made a filter using SanityCMS and Next Js, however, the code structure of the response in Sanity is much clearer compared to that of Strapi.

This is the code I've used in my previous project with Sanity:

const [filteredProducts, setFilteredProducts] = useState(products)

function handleProducts(e) {
    let categoryType = e.target.value
    setFilteredProducts(
        products.filter((product) => product.category == categoryType)
    )
}

I'm using this query where I alias the category as such and it is much simpler:

  const productQuery = `*[_type == "product"] {
    _id,
    slug,
    name, 
    image, 
    "category": category->name
    }`

My function for my Strapi project looks like this:

function handleProjects(e) {
    let categoryType = e.target.value
    setFilteredProjects(
        projects.filter((project) =>
            project.attributes.categories.data.map((i) =>
                i.attributes.title.includes(categoryType)
            )
        )
    )
}

I'm having an array of objects, but at some point I have to map over an array of objects one level deeper and see if the categoryType matches some of the object values two levels deep.

Can anyone show me what I'm doing wrong here?