Can't get values of double-nested entries

[jordanlambrecht]

I'm using gray-matter/frontMatter and remark-mdx to read values of an .mdx file in a nextJS project:

.mdx file:

details:
  - pronoun: she/her
  - favoriteThing: learning
  - leastFavoriteThing: winter
  - favoriteMovie: kiki's delivery service
  - hatedBird: crows
  - hobby: mountain biking
  - personalAesthetic: uncool millennial
  - signs:
      - sun: leo
      - rising: sagittarius
      - moon: capricorn

[slug].tsx:

  function Details() {
    return (
        <div>
          {details.map((s) => {
            return (
              <div>
                <h1>
                  {CamelCaseToSentence(Object.keys(s).toString())}
                </h1>
                {Object.keys(s).toString() === 'signs' ? (
                  <ul>
                    <li>☉ {frontMatter.details.signs}</li>
                    <li>↑ {frontMatter.details.signs.rising}</li>
                    <li>☽ {frontMatter.details.signs.moon}</li>
                  </ul>
                ) : (
                  <p>{Object.values(s).toString()}</p>
                )}
              </div>
            )
          })}
      </div>
    )
  }

The file can read everything except for the double nested values of Signs and throws an 'undefined' error. How do I map out the double-nested values? I've tried everything.