I'm creating a component in react that will display the avatar of the user but the catch is there will be limit on how many avatar will show. The solution that I'm thinking is using .slice(0,4).map then I'm gonna make a condition statement that if the length of the list is greater than 4 the button show all will appear. If the user click the button that rest of the user will pop up. The problem is how can display the rest of the user inside the pop up container?

<div className='pl-12 pr-6'>
        <div className='flex items-center justify-right'>
          {filterInfo &&
            filterInfo
              .slice(1, 10)
              .map((data) => (
                <img
                  className={`mr-2 rounded-full border-1px ${
                    active === data.creator[0]._id
                      ? 'border-primary p-0.5 opacity-100'
                      : ''
                  } cursor-pointer transition duration-75 ease-in opacity-70`}
                  key={data._id}
                  id={data.creator[0]._id}
                  src={data.creator[0].accountProfileUploaded}
                  alt={`${data.creator[0].firstName} ${data.creator[0].lastName}`}
                  title={`${data.creator[0].firstName} ${data.creator[0].lastName}`}
                  style={{ width: '40px', height: '40px' }}
                  onClick={handleOnFilterByProfile}
                />
              ))}

          {filterInfo && filterInfo.length >= 2 ? (
            <div
              className='shadow-md rounded-full relative'
              style={{ width: '40px', height: '40px' }}
            >
              <ChevronDoubleDownIcon
                className='h-4 w-4 absolute mt-3.5 ml-3 opacity-60 cursor-pointer hover:text-primary'
                aria-hidden='true'
              />
            </div>
          ) : null}
        </div>
      </div>

Thanks!