Estoy tratando de mostrar 3 estilos diferentes basados en codiciones, pero no puedo hacerlo usando una expresión ternaria. He encontrado algunas soluciones aquí , pero todavía tengo algunos problemas.
Las siguientes condiciones son las que quería hacer:

 <div className={styles.extraContainer}> { (() => { if (!opened && !followed ) <div id={styles.themeBox}><p>+10</p></div> //show this box else if (opened && !followed) <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> //show this icon else "" //show nothing })() } </div>

Porque cuando probé el siguiente código, recibí No anidar expresiones ternarias. error.

 {!opened && !followed ? <div id={styles.themeBox}><p>+10</p></div> : (opened && !followed ? <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} /> : ""}