How to pass props from async functions triggered by an OnClick event to a component React js

Question

I am working on an app which is a NY Times Search Engine (I am using this API: https://developer.nytimes.com/docs/most-popular-product/1/overview). I am showing the news most viewed in the last 7 days ordered by categories. Well, the user flow is the following one:

The user will click on a section and it will render the most viewed news in the last 7 days of that sections (for instance, "well"). My problem is I am having problems passing the props to the child component, I dont know why the News component is not receiving the props. Here the code of my Section component:

import React from 'react';
import { getNewsAttributes } from '../helpers/helpers';
import getNewsFilteredBySection from '../services/getNewsFilteredBySection';
import News from './News';

export default function Section({ section }) {

  function showEvent(e) {
    console.log("pasa por aquí");
    const sectionSearched = e.target.innerText;
    getNewsFilteredBySection(sectionSearched)
      .then((response) => {
        const filteredResults = response;
        const newsAttributes = getNewsAttributes(filteredResults);
        return (
          <News newsAttributes={newsAttributes} />
        )
      })
  }

  return (
    <div className="animate__animated animate__fadeIn animate__slower">
      <h3 className="section-container mr-4 mb-4 pointer"
        onClick={showEvent}
      >{section}</h3>
    </div>
  )


};

Here the code of my getNewsAttributes() method:

export function getNewsAttributes(filteredResults) {
  const newsAttributes = filteredResults.map(filteredResults => {
    const { title, abstract, url } = filteredResults;
    console.log(title, abstract, url);
    return { title, abstract, url };
  });
  return newsAttributes;
};

And here the code of my News component:

export default function News({ newsAttributes }) {
  const { title, abstract, url } = newsAttributes;

  console.log(`title: ${title}`);
  console.log(`abstract: ${abstract}`);
  console.log(`url: ${url}`);

  return (
    <div>
      <h3 className="section-container mr-4 mb-4 pointer">{title}</h3>
    </div>
  )


};

The console.log(title, abstract, url); of my getNewsAttributes(filteredResults) is currently showing this:

It seems like it is getting the required information (title, abstract and url) and mixing it together into a string. The console.logs of the News component doesnt get executed. Any idea where am I wrong? Thanks a lot :)