How can I display the same values of an array

Question

I have an array called teams which contains type fields. In the frontend I want to display these types as unique sections, and within these sections I want to display the same values of type.

This is the teams array teams array

In this code, I mapped the unique type fields of teams array, this will display only two unique values of type which are Best Team and Vaporize (based on the picture example). After that, I want to show the same types in the same section; for example Vaporize types, I would like to show all the values of Vaporize types in the same section (Vaporize).

  {[...new Set(character.teams?.map((x) => x.type))].map((type) => 
                    (
                        <section  id={type} className='my-4 flex flex-col items-center'>
                        <h1 className='text-4xl text-white my-8'>{type}</h1>
                        <div className='flex flex-row gap-8 items-center'>
                            {ch.characters?.map((ch, i) => (
                                <Link key={i} href={`/${ch.character.slug?.current}`} className='flex flex-col items-center'>
                                    <div className='relative'>
                                <h4 className='text-white text-sm mt-2 '>{ch.character.name}</h4>
                                </Link>
                            ))}
                        </div> 
                       
                    </section>
                    )
                    )}

This is a simplification of what I want : example