리액트 state로 css변경 함수 질문드립니다.

import React, { useEffect, useState } from 'react';
import styles from './product_list.module.css';
import Product from './product_item/product_item';


const ProductList = ({products}) => {
    
    const [filterDisplay, setFilterDisplay] = useState('none');

    const filterHandler = () => {
        if (filterDisplay === 'none') {
            setFilterDisplay('display');
            console.log(filterDisplay);
        } else {
            setFilterDisplay('none');
            console.log(filterDisplay);
        }
        
    }


    return (
        <section className={styles.product_list}>
            <button onClick={filterHandler} className={styles.filterBtn}><i className="fas fa-filter"></i></button>
            <div style={{
                display: filterDisplay,
            }} className={styles.filterBox}>
                <div className={styles.bikeBox}>
                    <button className={styles.bikeBtn}>MTV</button>
                    <button className={styles.bikeBtn}>하이브리드</button>
                    <button className={styles.bikeBtn}>로드바이크</button>
                </div>
            </div>
            {/* <button className={styles.btn_regiprod}>버튼</button> */}
            {
                products.map(product =>
                    <Product 
                        key={product.id}
                        product={product}
                    />
                )
            }
        </section>
    )


};

export default ProductList;

해당 코드입니다.

filterHandler()함수가 작동하면

하단 div의 스타일 display 속성값이 display로 바뀌어서 박스가 보였다 안보였다하게 만들고싶은데,

콘솔에는 변경된 state가 나오는데 실제로 작동이 안되네요... 해결법있을까요?

인프런 커뮤니티 질문&답변