use state 변경 시 잔상이 남는 현상

<Button
    variant="outlined"
    className={classes.recommendButton}
    disabled={!isAnySelected}
    onClick={onConfirm}
    color={"error"}
>
    <RecommendIcon fontSize="medium" sx={{mr:1}}/>
    추천 {count > 0 && (
    ({heartCost * count}
    <FavoriteIcon sx={{
        fontSize:'0.7rem',
        ml:0.5,
        verticalAlign:'middle'
    }}/>)
	)}
</Button>

이런 느낌의 소스였고
isAnySelected 가 변경될때마다 해당 버튼의 disabled 값이 false -> true 로 변경이 된다. 
근데 isAnySelected 의 조건과 count 의 조건이 똑같아서 변경이 동시에 일어나는데.

버튼 안에 텍스트
추천 (0)
이렇게 회색으로 표시 되고, 

isAnySelected  값과 count 값이 동시에 변하면 
추천 (1)
이렇게 텍스트가 변경되고 색상이 빨간색으로 변경된다. 

근데 문제점이 텍스트 변경과 색상 변경이 이런식으로 잔상이 일어나는 것이였다.

잔상.. 실제로는 빨간색

여러 블로그와 AI 를 잡고 물어봤으나 적당한 해결책을 찾지 못해서.. 
결국 버튼을 초기에 렌더링 하지 않는 방향으로 수정하였다. 

// 이전 코드
<Button>
    <RecommendIcon />
    추천 {count > 0 && (...)}
</Button>

// 현재 코드
{isAnySelected && (
    <Button>
        <RecommendIcon />
        추천 ({heartCost * count}...)
    </Button>
)}

버그성 같기도 하고.. AI 추론에서는 너무 많은 렌더링의 원인이 아닐까 해서 
useMemo 로도 변경했으나 별로 효과를 못보고. 
아직도 제대로된 원인을 모르겠다. 일단 돌아가는 길을 선택. 

혹시 원인을 알고 계신분은 답글 부탁드립니다.