I made a function that prints 5 data at a time and prints all data.length when the More button is pressed.

But there is a problem. Every time I click the button I get an error.

To illustrate my code, I first create a visible state and only display 5 at first. 'expanded' say 'true all product calls' away when clicked on a 'button' `false show only the first 5'

   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>
                    

    }

But every time I click the button I get an error.

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

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

I don't know how to solve it. How would you like to modify the code? Oh, and I want to make the buttons invisible if there are less than 5 at first, but I don't know how to write the code.