button 클릭 할 떄 마다 더보기/닫기 에러

제로초님 안녕하세요.

제가 button 클릭 할 떄마다 더보기/닫기 버튼을 만들어 주었는데.

처음에는 5개씩 보이도록 설정 해 주고.

더 보기 버튼을 클릭하면 -> 모든 length 만큼 보이도록 설정 해 주었습니다.

그리고 닫기 버튼을 누르면 -> 처음 5개만 보이도록 설정 해 주었구요.

하지만 문제점이 있습니다.

클릭 하면 동작은 합니다. 하지만, 1~2초 있다가 type Error 가 발생합니다.

어디서 잘못 됐는지 잘 모르겠습니다.

아 그리고 처음에 5개 이하로 보일 떈 버튼을 안 보이도록 설정 해 주고 싶은데,

어떻게 코드를 작성 해야 할 지 모르겠습니다. 똑같이 setState 를 만들어서 5개 이하로 보이는 것들은 false 를 만들어 안보이도록 설정 해 주면 될 거 같은데 모르겠네요

에러 발생 구문 입니다.

TypeError: setVisible(...) is not a function

  46 | 
  47 |    
  48 |    const showMore = () => {
> 49 |        visible === 5 ? (
  50 |          setVisible(ProductDetail.allergies.length)
  51 |        ) (
  52 |           setexpanded(true)

// 제가 작성한 코드 입니다. 

 const [visible, setVisible] = useState(5)
    const [expanded, setexpanded ] = useState(false);

    const showMore = () => {
        visible === 5 ? (
           setVisible(ProductDetail.allergies.length)
        ) (
           setexpanded(true)
        ) : ( 
           setVisible(5)
        ) (
            setexpanded(false)
           
        )

  return (

 {ProductDetail && ProductDetail.allergies?.length ? 
                            ProductDetail.allergies.slice(0, visible).map(All => (
                            <li key={All.id}>
         {All.displayText}</li>
                        )) : <li>No information.</li>}
)


    
                    <button type="button" onClick={showMore}>
                        {expanded ? (
                            <span>close</span>
                        ) : (
                            <span>see more</span>
                        )}  
                    </button>
                    

    }