Hice una función que imprime 5 datos a la vez e imprime toda la longitud de datos cuando se presiona el botón Más.

Pero hay un problema. Cada vez que hago clic en el botón me sale un error.

Para ilustrar mi código, primero creo un estado visible y solo muestro 5 al principio. 'expandido' dice 'verdadero todas las llamadas de productos' cuando se hace clic en un 'botón' 'falso muestra solo los primeros 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> }

Pero cada vez que hago clic en el botón me sale un error.

TypeError: setVisible(...) no es una función

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

no se como solucionarlo ¿Cómo le gustaría modificar el código? Ah, y quiero que los botones sean invisibles si hay menos de 5 al principio, pero no sé cómo escribir el código.