Inside my React component, I am using a function inside the map function. However it is returning an error

I am having issues calling a function inside the map function in this React component.

This component should display a hierarchy of sorts in a table format. It should display a galaxys name and year discovered. Then it should iterate through and display all the known star systems in that galaxy, and finally, display each known planet in each of those star systems.

I've tried numerous suggestions that I've seen on SO and other websites.

When I do not use 'this' in front of the function, I get this error "populatePlanetData is not defined"

When I do use 'this', I get this error "this.populatePlanetData is not a function"

One of the answers I found suggested using an arrow function as suggested in this answer: "this" is undefined inside map function Reactjs

This one also suggests using arrow functions: Calling functions inside a map() function in React render()

But even with that arrow function, I still get the above errors. I can't figure out what I'm doing wrong. Is there anything obvious that's wrong or not done the correct way?

Here is the component:

import React, { Component } from 'react';

export class GetTestGalaxy extends Component {
static displayName = GetTestGalaxy.name;

constructor(props) {
    super(props);
    this.state = { galaxy: null, systems: [], planets: [], loading: true };
}

componentDidMount() {
    this.populateGalaxyData(482);
    this.populateSystemData(482);
}

static renderGalaxyTable(galaxy, systems, planets) {
    return (
        <table>
            <thead>
                <tr>
                    <th>Galaxy Name</th>
                    <th>Year</th>
                </tr>
            </thead>
            <tbody>
                <tr key={galaxy.id}>
                    <td>{galaxy.name}</td>
                    <td>{galaxy.year}</td>
                </tr>
                {this.systems.map(system =>
                    <tr>
                        <td>{system.name}</td>
                        <td>
                            {this.populatePlanetData(system.id).map(planet =>
                                    <span>{planet.name}</span>
                            )}
                        </td>
                    </tr>
                )}
            </tbody>
        </table>
    );
}

render() {
    let contents = this.state.loading
        ? <p><em>Loading...</em></p>
        : GetTestGalaxy.renderGalaxyTable(this.state.galaxy, this.state.systems, this.state.planets);

    return (
        <div>
            <h1 id="tabelLabel" >Galaxy Information</h1>
            {contents}
        </div>
    );
}

async populateGalaxyData(id) {
    const response = await fetch('https://localhost:44389/api/galaxylist/' + id);
    const data = await response.json();
    this.setState({ galaxy: data, loading: false });
}

async populateSystemData(id) {
    const response = await fetch('https://localhost:44389/api/systemlist/GetSystems/' + id);
    const data = await response.json();
    const result = Object.values(data);
    this.setState({ systems: result, loading: false });
}

async populatePlanetData(id) {
    const response = await fetch('https://localhost:44389/api/planetlist/GetPlanets/' + id);
    const data = await response.json();
    const result = Object.values(data);
    this.setState({ planets: result, loading: false });
}
}