Estoy creando una aplicación que agrega una transmisión cada vez que un usuario busca una (hasta cuatro jugadores en una página). Quiero cambiar el estilo en función de cuántos jugadores tengo. Estoy usando mi estado searchedStreams. la longitud como condición. Mi problema es que después de buscar una segunda transmisión, la clase contenedora se actualiza correctamente, pero el nombre de clase de ReactPlayer en el primer reproductor no se actualiza.

 const ctx = useContext(ThemeContext); const stylesWrapper = `${ ctx.searchedStreams.length === 1 ? `${classes.wrapperOneStream}` : "" } ${ctx.searchedStreams.length === 2 ? `${classes.wrapperTwoStreams}` : ""}${ ctx.searchedStreams.length === 3 ? `${classes.wrapperThreeStreams}` : "" }`; const stylesPlayer = `${ ctx.searchedStreams.length === 1 ? `${classes.player1}` : "" } ${ctx.searchedStreams.length === 2 ? `${classes.player2}` : ""} ${ ctx.searchedStreams.length === 3 ? `${classes.player3}` : "" }`; return ( <Fragment> {ctx.searchedStreams.map((label) => ( <div className={stylesWrapper} key={label}> <ReactPlayer key={label} className={stylesPlayer} url={`https://www.twitch.tv/${label}`} width="100%" theme="dark" playing={true} /> </div> ))} </Fragment> );