Estoy creando un componente en reaccionar que mostrará el avatar del usuario, pero el problema es que habrá un límite en la cantidad de avatares que se mostrarán. La solución que estoy pensando es usar .slice(0,4).map, luego voy a hacer una declaración de condición de que si la longitud de la lista es mayor que 4, aparecerá el botón mostrar todo. Si el usuario hace clic en el botón, aparecerá el resto del usuario. El problema es ¿cómo se puede mostrar el resto del usuario dentro del contenedor emergente?

 <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>

¡Gracias!