현재 제 순위는 2등입니다. 이렇게 되어버리니, 제 앞에 등수 사람은 두명이 안되기 때문이 보이는 것처럼 이상하게 화면에 나타나게 됩니다.

즉, 유저가 없는 칸은 화면에 나타나면 안되고, 이 외로도 내가 1등이면 앞의 circle들은 없어야 하고 내가 꼴등이면 내 뒤의 circle들도 없어야 합니다.

이에 조건부 렌더링으로 변경하였습니다

{data.above2 && (
  <OtherRankBox>
    <OtherInfoScript>{data.above2.rank}등</OtherInfoScript>
    <OtherInfoScript>{data.above2.nickname}</OtherInfoScript>
    <OtherInfoScript>
      {data.above2.point}
      {isScoreRank ? '점' : '일'}
    </OtherInfoScript>
  </OtherRankBox>
)}

null 이 아닐때만 렌더링을 합니다

{hasAboveUsers && (
  <>
    <Circle />
    <Circle />
    <Circle />
  </>
)}

Circle 또한 조건부 렌더링을 적용합니다.