Tab 관련 질문드립니다.

코드는, 

<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
                  <Nav.Item>
                    <Nav.Link eventKey="link-0" onClick={ ()=>{ 누른탭변경(0) }}>1</Nav.Link>  
                  </Nav.Item>
                  <Nav.Item>
                    <Nav.Link eventKey="link-1" onClick={ ()=>{ 누른탭변경(1) }}>2</Nav.Link>
                  </Nav.Item>      
                </Nav>
                 
                <TabContent 누른탭={누른탭}/>

          </div>
      </div>
    )
  }

function TabContent(props){
  if (props.누른탭 === 0){
    return <div>111이게 아래로 가야 하는데 왜 위에 있는 걸까요?</div>
  } else if (props.누른탭 === 1){
    return <div>222이게 아래로 가야 하는데 왜 위에 있는 걸까요!!!!!!!!?</div>
  } else if (props.누른탭 === 2){
    return <div>내용2</div>
  }
}

와 같습니다. 샘 코드랑 똑같이 쳤는데, 해당 탭을 눌렀을 경우, 원하는 글씨(return)되는 글씨의 위치가 

tab아래 나와야 하는데 저렇게 나오네요... 뭐가 문제일까요?