Creating Sub Arrays

[jordanlambrecht]

I'm trying to take this manual setup and build a block field out of it:

name: XXX
active: true
details:
  - almaMater: XXX
  - pronoun: she/her
  - joined: August 2022
  - favoriteThing: Camping in the fall
  - leastFavoriteThing: Having their headphone cord catch on something and be pulled out of their ears.
  - favoriteMovie: Lord of the Rings
  - mostHatedBird: Turkeys
  - hobby: Drawing cartoons, straightening artwork in public spaces and waving at babies.
  - personalAesthetic: 1990's Sitcom Mom
title: Project Manager

Any ideas how I can nest them like that? If I use the standard block method, it removes the dashes, which throws an error when I later try to run this code:

 {details.map((s, index) => {
            return (
              <div key={index}>
                <h3>
                  {Object.keys(s).toString()}
                </h3>
                <p >{Object.values(s).toString()}</p>
              </div>
            )
}

Any ideas?