Using the navigator.share() api, how do I share only the information for one object?

In the snippet below, I’m trying to use the navigator.share() API on a series of articles displaying with a tagged template literal. The problem is that when I click on the share button, all the elements of each object are shared.

I think the problem comes down to this snippet here:

const shareData = {
  title: "example.com",
  text: blogArticles.map((titles) => titles.title),
  url: blogArticles.map((urls) => urls.url)
};

How do I share only the object’s key:value pair for the article shared and not all of the object elements?

const blogArticles = [
  {
    date: "11/24/2021",
    title: "the querySelectorAll DOM API",
    minutesToRead: 10,
    tags: ["javascript", "html"],
    image: "https://placekitten.com/1600/900",
    altText: "image of kittens",
    teaser:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus blanditiis magni natus! Blanditiis quibusdam mod",
    url: "articles/queryselectorall-dom-api.html"
  },
  {
    date: "11/24/2021",
    title: "the difference between named and anonymous functions",
    minutesToRead: 10,
    tags: ["javascript", "html"],
    image: "https://placekitten.com/1601/900",
    altText: "image of kittens",
    teaser:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus blanditiis magni natus! Blanditiis quibusdam mod",
    url: "articles/difference-between-named-and-anonymous-functions.html"
  },
  {
    date: "11/24/2021",
    title: "css animations explained",
    minutesToRead: 10,
    tags: ["javascript", "html"],
    image: "https://placekitten.com/1602/900",
    altText: "image of kittens",
    teaser:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus blanditiis magni natus! Blanditiis quibusdam mod",
    url: "articles/css-animations-explained.html"
  }
];

//pass blogArticles data
function blogArticlesTemplate(articles) {
  return `
    <div class="tease-post">
      <div class="tease-post__container">
        <h5 class="tease-post__meta">
          <span class="tease-post__meta--date">${articles.date}</span>
        </h5>
        <h2 class="tease-post__title"><a href="${articles.url}">${articles.title}</a></h2>
        <div class="tease-post__details">
          <h4><i class="fa fa-clock"></i> ${articles.minutesToRead} minute read</h4>
          <h4><i class="fa fa-tag"></i> ${articles.tags}</h4>
          <h4 class="share"><i class="fa fa-share-alt"></i> Share</h4>
        </div>
        <hr>
        <img class="tease-post__img" src="${articles.image}" alt="${articles.altText}">
        <div class="tease-post__text">
          <p>${articles.teaser}</p>

          <a href="//${articles.url}" class="tease-post__more">[read more]</a>
        </div>      
      </div>
    </div>    
  `;
}

document.getElementById('blogTeaserList').innerHTML = `
  ${blogArticles.map(blogArticlesTemplate).join('')}
  `;

//sharing
const shareData = {
  title: "example.com",
  text: blogArticles.map((titles) => titles.title),
  url: blogArticles.map((urls) => urls.url)
};

const shareButtons = document.querySelectorAll(".share");

if ("share" in navigator) {
  shareButtons.forEach((shareButton) => {
    shareButton.addEventListener("click", () => {
      navigator
        .share(shareData)
        .then(() => {
          console.log("Shared", shareData);
        })
        .catch(console.error);
    });
  });
} else {
  shareButtons.forEach((shareButton) => {
    shareButton.style.display = "none";
  });
}

img {
  width: 100%;
  height: auto;
}

.tease-post {
  max-width: 350px;
  background: lightgray;
}

.share {
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div id="blogTeaserList"></div>