I'm trying to call a function called makeMap in render function. Everything is being printed out to the console, however, it doesn't update the HTML. Would love to know what I'm doing wrong and what's the right way to do that. :)

import React from "react";
import axios from "axios";

export default class CountryList extends React.Component {
    state = {
        countries: []
    }

    componentDidMount() {
        axios.get(`https://restcountries.com/v2/all?fields=name,region,area`)
        .then(res => {
            const countries = res.data;
            this.setState({ countries });
        })
    }

    makeMap() {
        this.state.countries.map(country => {
                console.log("aaaaaaaaa");
                return (<li key={country.name}>{country.name}</li>)
        })
    }

    render() {
        return(
            <div>
                {this.makeMap()}
            </div>
        )
    }
}