Change between styles according to active

I’m trying to switch between list view and grid view using the code below:

// List view
<button className={styles.viewBtn `${view === 'list' ? 'active': ''}`} onClick={() => setView('list')} type="button" title="List View">
     // <svg>
</button>

// Grid view
<button className={styles.viewBtn `${view === 'grid' ? 'active': ''}`} onClick={() => setView('grid')} type="button" title="Grid View">
    // <svg>
</button>

So to style the buttons I do import styles from ./styles.less and here’s my css for the buttons:

.viewBtn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-radius: 4px;
    background-color: transparent;
    border: none;
    color: var(--main-color);
    margin-left: 8px;
    transition: .2s;
    
    &.active {
      background-color:  rgba(195, 207, 244, 0.2);
      color: #fff;
    }
    
    &:not(.active):hover {
      background-color:  rgba(195, 207, 244, 0.1);
      color: #fff;
    }
}

How do I switch between .active and :not(.active) for the style of the buttons? And would .active work in React?