la respuesta json se recibe de la API de datos de usuario ficticios. cuando hago clic en el botón Leer más, todos los componentes que regresan en el mapa se expanden/ocultan. Quiero que muestre/oculte el texto de div específico en el que se hace clic

 import React, { useState } from 'react' const UserBlock = (props) => { //styles strings const infoTitle = `font-bold` //Hooks const [laodMoreClicked, loadMoreStatus] = useState(false) const [viewMoreClass, setViewMoreClass] = useState("hidden") //functions const viewMore = () => { laodMoreClicked === true ? loadMoreStatus(false) : loadMoreStatus(true); laodMoreClicked === true ? setViewMoreClass("hidden") : setViewMoreClass("") } const singleUser = props.userArray.map((user, index) => { return ( <div key={index} className=" bg-gray-900 text-white m-2 p-10 w-full rounded-2xl shadow-lg m-8 md:w-1/4 lg:w-1/6"> <p className={`${infoTitle} text-xl`}> username: {user.name}</p> <div className={viewMoreClass}> <p className={infoTitle}> email: {user.email} </p> <p className={infoTitle}> website: {user.website} </p> <p className={infoTitle}> phone: {user.phone} </p> <p className={infoTitle}> address: </p> <p className={infoTitle}> suite: {user.address.suite} </p> <p className={infoTitle}> street: {user.address.street} </p> <p className={infoTitle}> city: {user.address.city} </p> <p className={infoTitle}> zipcode: {user.address.zipcode} </p> </div> <div> <button onClick={viewMore}> View {laodMoreClicked === true ? `${index} Less` : "More"} </button> </div> </div> ) }) return ( <div className='flex flex-wrap w-full justify-center '> {singleUser} </div> ) } export default UserBlock