I'm building an app that adds a stream whenever a user searches for one (up to four players on a page). I want to change the styling based on how many players I have. I'm using my searchedStreams state. length as a condition. My issue is that after a second stream is searched the wrapper class is updated properly but the ReactPlayer className on the first player does not update.

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>
  );