At first, I want to make only 5 data.text values ​​visible and all data.text to be exposed when the More button is clicked. Then I want to only 5 data.text visible when the close button is pressed.

However, in the code I wrote, at first, five are visible, but when the More button is clicked, it doesn't work properly.

How do I modify the code to make it work?

   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>
                    

                    
)