Как сделать нажатый фильтр активным, а другие фильтры неактивными

У меня есть компонент FilterBar

const FilterBar = ({filters}) => {    
const [visible, setVisible] = useState(false)

return (
    <div className="typeBar">
        {filters.length > 0 ? 
            filters.map(filter =>
                <div className={visible ? "typeBar__item tybeBar__active" :"typeBar__item"} key={filter.id} 
                onClick={() => {filter.func(); setVisible(!visible) }}
                >{filter.name}</div>

        )
        :
        <h1>no filter</h1>
        }
    </div>
)
}

Он отвечает за сортировку.

Я хотела сделать так, чтобы при нажатии на определенный фильтр он становился активным(т.е. менял background). Только когда я нажимаю на один из фильтров, они все становятся активными.

Как мне сделать так, чтобы цвет менял только один фильтр?