the json response is received form dummy user data API. when I click on read more button all components returning in map get expanded/hidden . I want it to show/hide the text of specific div that is clicked

    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