Component rerendering only after double click

I have a parent component that is passing products down into a subcomponent as state along with the product’s filters. For some reason I have to double click the “filters” in order for the parent component to rerender with the filtered products. I understand because it is running asynchronously it is not updating the state immediately, but how can I force the update and rerender to run as soon as I add a filter without using forceUpdate? Is this where redux would come in to play?

Parent component

    const [products, setProducts] = React.useState(data.pageContext.data);

    const handleCount = () => {
        setCount(count + 24);
    }

    return (
        <div style={{width: "100%"}}> 
        <Header/>
        <div style={{display: "flex", flexDirection: "row", justifyContent: "center"}}>
            <Sidebar 
            products={products}
            setProducts={setProducts}
            baseProducts={data.pageContext.data}
            />
            <div style={{display: "flex", flexDirection: "column"}}>
            <h1 style={{width: "50%"}}>Cast vinyl</h1>
            <h3>Product Count: {products.length}</h3>
            <ProductList>
            {products.slice(0, count).map(product => {
                return (
                    <a href={`/vinyl/${product.data.sku}`}><div>
                        {product.data.field_product_image.length > 0  ? 
                            <ProductImage images={data.data.allFiles} sku={`${product.data.sku}`}/> :
                            <StaticImage src="http://stagingsupply.htm-mbs.com/sites/default/files/default_images/drupalcommerce.png" width={250} alt=""/>}
                             <h3>{product.data.title}</h3>
                                <h5>{product.data.sku}</h5>
                    </div></a>
                    ) 
            })}
            </ProductList>
            <h3 onClick={handleCount}>Load more</h3>
            </div>
        </div>
        </div>
    )

Child Component

const Sidebar = ({ setProducts, baseProducts }) => {
    const [filters, setFilters] = React.useState([]);
    const [click, setClick] = React.useState(false);

    const handleClick = () => {
        setClick(!click);
    }

    const onChange = (e) => {
        if (!filters.includes(e)) {
            setFilters([...filters, e])
        }
        if (filters.length > 0) {
        const filteredProducts = baseProducts.filter(product => filters.includes(product.data.field_product_roll_size));
        setProducts(filteredProducts);
        }
    }

    const clearFilters = () => {
        setFilters([]);
        setProducts(baseProducts);
        setClick(false);
    }

    const rollSize = [...new Set(baseProducts.map(fields => fields.data.field_product_roll_size))]

    return (
        <SidebarContainer>
            <h3>Mbs Sign Supply</h3>
                <ul>Sub Categories</ul>
                    <a href="/vinyls/calendered_vinyl"><li>Calendered Vinyl</li></a>
                    <li>Cast Vinyl</li>
            <h3>Filters</h3>
            {filters.length > 0 ? <button onClick={clearFilters}>Clear Filters</button> : null}
            <li onClick={() => handleClick()}>Roll Size</li>
                {/*map through roll size array*/}
                {/*each size has an onclick function that filters the products array*/}
                {click ? rollSize.sort().map(size => {
                    return (
                        <span style={{display: "flex", flexDirection: "row", alignItems: "center", height: "30px"}}>
                        <Checkbox onClick={() => {onChange(size)}} />
                        <p >{size}</p>
                        </span>
                    )
                }) : null}
            <li>Width</li>

Thanks in advance