Better way to this kind of UI in react (State Based)?

        {playState === PLAY_STATE.NOT_STARTED && "Debug Mode"}
        {playState === PLAY_STATE.PLAYING && (
          <div className="flex items-center gap-x-1">
            <span className="rounded-full h-2 w-2 bg-[color:#59B655]"></span>
            Debugging ongoing
          </div>
        )}
        {playState === PLAY_STATE.PAUSED && (
          <div className="flex items-center gap-x-1">
            <div className="rounded-full h-2 w-2 bg-[color:#3E85CA]"></div>
            Debugging paused
          </div>
        )}
        {playState === PLAY_STATE.STOPPED && (
          <div className="flex items-center gap-x-1">
            <div className="rounded-full h-2 w-2 bg-[color:#FF5B5B]"></div>
            Debugging stopped
          </div>
        )}
      

        {playState === PLAY_STATE.NOT_STARTED && "Debug Mode"}
        {playState === PLAY_STATE.PLAYING && (
          <div className="flex items-center gap-x-1">
            <span className="rounded-full h-2 w-2 bg-[color:#59B655]"></span>
            Debugging ongoing
          </div>
        )}
        {playState === PLAY_STATE.PAUSED && (
          <div className="flex items-center gap-x-1">
            <div className="rounded-full h-2 w-2 bg-[color:#3E85CA]"></div>
            Debugging paused
          </div>
        )}
        {playState === PLAY_STATE.STOPPED && (
          <div className="flex items-center gap-x-1">
            <div className="rounded-full h-2 w-2 bg-[color:#FF5B5B]"></div>
            Debugging stopped
          </div>
        )}