View is not updated on React

This is my component, I though that the problem was , that I0m using an array of objects an then is not detected as a different array and it doesn't change but now I'm using lodash deepClone function and I have the same problem, nothing changes on the view filterPerBlocked function is executed

import React, {useState, useEffect, cloneElement} from 'react';
import './composites.css';
import Header from "../Header";
import CompositeResult from "./CompositeResult";
import compositeResult from "./CompositeResult";
import _ from "lodash";


// Clean empty categories
let filtered = window.COMPOSITES.filter(function (value, index, arr) {
    return value.composites.length > 0;
});

const chunk = (arr, size) =>
    Array.from({length: Math.ceil(arr.length / size)}, (v, i) =>
        arr.slice(i * size, i * size + size)
    );

// const cloneComposites = (array) =>{
//     return array.map( (composite) => {
//         return JSON.parse(JSON.stringify(composite))
//     })
// }

const chunked = chunk(filtered,Math.round(filtered.length / 2));

export default function Composites() {
    const [composites, setComposites] = useState(chunked);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(false)
    },[]);

    const filterPerBlocked = (showBlocked) => {

        let filtered_copy = _.cloneDeep(filtered)
        debugger
        filtered_copy.forEach((category) => {
            let filtered_composites = category.composites.filter( composite => composite.blocked == showBlocked )
            category.composites = filtered_composites;
        });
        filtered_copy = chunk(filtered_copy, filtered_copy.length/2);
        setComposites(filtered_copy)
    }

    return (
        <div>
            <Header></Header>
            <div className="sort-button-row">
                <button className="btn btn-primary" onClick={ () => filterPerBlocked(true)}>Only blocked</button>
                <button className="btn btn-primary" onClick={() => filterPerBlocked(false) }>Only not blocked</button>
            </div>
            <div className="card shadow py-2 mb-2">
                <div className="card-body">
                    {loading === true ? (
                        <div className={'text-center'}>
                            <span className="fa fa-spin fa-spinner fa-4x"></span>
                        </div>
                    ) : (
                        <div>
                            <div className="composite-columns">
                                {composites.map((result, key) =>
                                    <div className="col" key={key}>
                                        {result.map(resultComposites =>
                                            <div key={resultComposites.category.id}>
                                                <CompositeResult name={resultComposites.category.name}
                                                                 composites={resultComposites.composites}></CompositeResult>
                                            </div>
                                        )}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    )

}