Al principio, quiero hacer visibles solo 5 valores de data.text y que todos los data.text estén expuestos cuando se hace clic en el botón Más. Entonces quiero que solo se vean 5 datos.texto cuando se presiona el botón de cerrar.

Sin embargo, en el código que escribí, al principio, cinco son visibles, pero cuando se hace clic en el botón Más, no funciona correctamente.

¿Cómo modifico el código para que funcione?

 const [visible, setVisible] = useState(5) const [expanded, setexpanded ] = useState(false); const showMore = () => { visible === 5 ? ( setVisible({ visible: ProductDetail.allergies.length, expanded: true }) ) : ( setVisible({ visible: 5, expanded: false }) ) } return ( <ul> {ProductDetail && ProductDetail.allergies?.length ? ProductDetail.allergies.slice(0, visibleBlogs).map(All => ( <li key={All.id}> ..... </li> </ul> <button type="button" onClick={showMore}> {expanded ? ( <span>close</span> ) : ( <span>more</span> )} </button> )