useEffect를 사용한 Fade 애니메이션이 이상하게 동작합니다.

const FadeContent = styled.div`
  opacity: 0;
  opacity: ${props => (props.isVisible ? 1 : 0)};
  transition: opacity 0.5s;
`;

function TabContent({ tab }) {

    let [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        let timer = setTimeout(() => setIsVisible(true), 500);
        return () => {
            clearTimeout(timer);
            setIsVisible(false);
        }
    }, 
);

    return (
        <>
            <FadeContent isVisible={isVisible}>
                {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>]
}
            </FadeContent>
        </>
    );
}

내용 0 누르면 아무것도 없는 상태에서 내용 0, 
내용 1 누르면 아무것도 없는 상태에서 내용 1 이런식으로 떠야 하는데

내용 1을 누르면 내용1이 잠시 출력되었다가 다시 fade되어 내용1이 출력됩니다. cleanup function도 잘 설정해준 것 같은데 왜이럴까요?

답변 미리 감사합니다.