не получается при клике добавить новый класс active и удалить его при второй клике

Если честно, ничего не понял, что вы задумывали, но из этого думаю дальше додумаете сами.

const [styles, setStyles] = useState(['slide'])

const clearStyle = () => {
  const tempStyles = [...styles];
  tempStyles.pop();
  setStyles(tempStyles);
}

const addStyle = (id) => {
    setStyles((prevState) => [...prevState, id]);
};



return (
    <div className='container'>
        
        {state.assortment.map((assort, index) => {
            return (
                <div className={styles.join(' ')}
                    style={{ backgroundImage: `url(${assort.bgImage})` }}
                    onClick={() => addStyle(index)}
                    key={index}>
                    <h3>{assort.title}</h3>
                </div>
            )
        })}
    </div>
);
};

Второй вариант догадки, который будет работать добавлять классы нужному элементу. Функцию clearStyle я не переделывал, ибо вообще не понятно какая смысловая нагрузка в ней в данном сценарии, так что додумывайте сами.

const [styles, setStyles] = useState(() => state.assortment.map((item, id) => {
  return {id: ["slide"]}
}))

const clearStyle = () => {
  const tempStyles = [...styles];
  tempStyles.pop();
  setStyles(tempStyles);
}

const addStyle = (id) => {
    setStyles((prevState) => [...prevState, id]);

    const tempStyles = styles.slice()

    tempStyles[id].push("active")

    setStyles(tempStyles)
};



return (
    <div className='container'>
        
        {state.assortment.map((assort, index) => {
            return (
                <div className={styles.join(' ')}
                    style={{ backgroundImage: `url(${assort.bgImage})` }}
                    onClick={() => addStyle(index)}
                    key={index}>
                    <h3>{assort.title}</h3>
                </div>
            )
        })}
    </div>
);
};