How to re-render content after changing state value?

Question

JavaScript

import React, { Component } from 'react'

import Items from '../items'
import Filters from '../filters'
import Service from '../../services'

export default class Shop extends Component {

    KubicService = new Service()

    state = {
        items: {},
        filters: {},
        filtered: 'all'
    }

    componentDidMount() {
        this.KubicService.getCategories()
        .then((result) => {
            this.setState({
                filters: result.data
            })
        })

        this.KubicService.postCatalog()
        .then((result) => {
            this.setState({
                items: result.data
            })
        })
    }

    onFilterClick = (e) => {
        const cats = {...this.state.filters}
        const itemId = e.target.id
        console.log(typeof this.state.items)
         if(itemId == 'all') {
            this.setState({
                filtered: 'all'
            })
         } else {
             this.setState({
                 filtered: cats[itemId].id
             })
         }
        }

    render(){

        return(
            <div>
                <Filters categories={this.state.filters} onFilterClick = { this.onFilterClick }/>
                <Items items = { this.state.items } />
            </div>
        )
    }
}

Here is the main component where the state is stored. As you can see, the current filter is also here. I wrote a function that changes this value to another when clicking on the corresponding filter. But re-rendering the content depending on the filter does not work. It doesn't work and that's it. Maybe I'm stupid (most likely), but I've been struggling with this task for 2 days and I can't find a solution. Tried everything I think

import React from 'react'

const Items = (props) => {

        const arr = Array.from(props.items)

        const elements = arr.map((item, index) => {
            let url = ''
            if(item && item.preview_image) {
                url = 'http://******'
                url = url + item.preview_image
            }
            return (
                <div key={index} className='store-item'>
                    <img className='store-item__img' src={url} alt='item img'></img>
                    <h3 className='store-item__title'>{item.name}</h3>
                    <h3 className='store-item_price'>${item.price}</h3>
                </div>
            )
        })
        
        return (
            <div className='store-items'>
                { elements }            
            </div>
        )
    }

export default Items

Here is the code for the items themselves

import React from 'react'

const Filters = (props) => {

    const arr = Array.from(props.categories)

    const filters = arr.map((item, index) => {
        return(
            <button className='category btn' key={index} id={index} onClick={ props.onFilterClick }>{item.name}</button>
        )
    })

        return(
            <div className='store-filters'>
                <div className='filter-category'>
                    <div className='categories'>
                    <button className='category-all btn' id="all" onClick={ props.onFilterClick }>all</button>
                        { filters }
                    </div>
                    <select className="filter">
                        <option className='filter-variable'>Price: high to low</option>
                        <option className='filter-variable'>Price: low to high</option>
                    </select>
                </div>
            </div>
        )
    }

export default Filters

And here are the filters.