Короче расклад такой - нужно обращаться к каждому элементу отдельно, по крайней мере это работает для меня:
<div className={styles.social}>
<div className={`${styles.socItem} fab fa-vk`} onClick={(e) => activeSoc(e, 'vk')}/>
<div className={`${styles.socItem} fab fa-twitter`} onClick={(e) => activeSoc(e)}/>
<div className={`${styles.socItem} fab fa-telegram`} onClick={(e) => activeSoc(e)}/>
<div className={`${styles.socItem} fab fa-facebook`} onClick={(e) => activeSoc(e, 'facebook')}/>
<div className={`${styles.socItem} fab fa-google`} onClick={(e) => activeSoc(e)}/>
<div className={`${styles.socItem} fab fa-yandex`} onClick={(e) => activeSoc(e)}/>
<div className={`${styles.socItem} fas fa-envelope`} onClick={(e) => activeSoc(e)}/>
</div></button>