Как правильно обработать данные из промиса?

Хочу, получить данные из API, и отобразить их на странице. Для примера беру данные из swapi вот так

export const getDataFunction = () => {
  return fetch("https://swapi.dev/api/people/1")
  .then((data) => data.json()); 
};

Дальше, у меня есть класс, который отрисовывает элементы и содержит стейт, который по задумке, должен содержать объект/массив пришедший из API:

import {getDataFunction} from './swapiData.js';
import {DataCatalog} from './DataCatalog.js';

export class MainPage {
    constructor(element, props){
        this.element = element;
        this.props = props;
        this.state = {
            getData: {}
        }
        this.render();
    }
    render(){
        getDataFunction().then(res => this.state.getData = res)
        
        this.element.innerHTML = `
    <DataCatalog></DataCatalog>
    `
        new DataCatalog (document.querySelector('DataCatalog'),
            {elements: this.state.getData}
        )
    }
}

Проблема состоит в том, что я не понимаю, как правильно добавить данные в стейт в виде массива или объекта (не промиса). Пытаюсь вот так, но по-момему это совсем не то

getDataFunction().then(res => this.state.getData = res)

ну и как результат в теге <DataCatalog></DataCatalog> отрисовывается undefined, потому что класс DataCatalog в пропсах получает пустой объект.

подскажите, как правильно добавить данные в виде объекта/массива в стейт класса MainPage, чтобы потом нормально использовать их в классе DataCatalog?

Класс DataCatalog отрисовывающий что-то из API:

export class DataCatalog {
  constructor(element, props) {
    this.element = element;
    this.props = props;
    this.render();
  }
  render() {
        this.element.innerHTML = `
    
<div class="starship2">${this.props.elements.name}</div>`;
  }
}

спасибо.