가위바위보 전적 기록

숫자야구 파트에서 배운 것을 응용해서 가위바위보에서 전적을 기록하게 하려고 시도했습니다.

클래스로 컴포넌트를 작성한 경우에는 제대로 작동하는 것을 확인했으나 Hooks로 변경하고 나서는 제대로 작동하지 않아 질문 드립니다. 

state에 history라는 배열을 만들어 준 후 가위바위보의 결과를 승리/무승부/패배로 배열에 추가하도록 했습니다. map으로 history 배열을 순회하면서 전적을 출력하도록 하고싶었는데 

위와 같이 공백이 출력됩니다. 코드에서 어떤 부분을 검토하면 좋을까요?

const onClickBtn = (choice) => () => {
    clearInterval(interval.current);
    const myScore = scores[choice];
    const cpuScore = scores[computerChoice(imgCoord)];
    const diff = myScore - cpuScore;
    if ( diff === 0 ){
      setResult('비겼습니다');
      setHistory((prevHistory) => {
        return [...prevHistory, '무승부'];
      })
    } else if ([-1, 2].includes(diff)) {
      setResult('이겼습니다');
      setScore((prevScore) => prevScore + 1);
      setHistory((prevHistory) => {
        return [...prevHistory, '승리'];
      });
    } else {
      setResult('졌습니다');
      setScore((prevScore) =>  prevScore - 1);
      setHistory((prevHistory) => {
        return [...prevHistory, '패배'];
      });
    }
    setTimeout(()=> {
      interval.current = setInterval(changeHand, 100);
    }, 2000);
  };

<ul>
          {history.map((v, i) => {
              return (
                <Try key={`${i + 1}차 시도:`} tryInfo={v} /> // html의 attribute와 유사한 역할을 하는 props
              )
          })}
</ul>

const Try = memo(({ TryInfo }) => {
  return (
      <li>{ TryInfo }</li>    
  )
})