Struggling to render multiple components onto a page using a function + for loop

I want to render components into my React app using a for loop inside of a function.

But when I add n > 1 number of components to the variable I am returning inside of the function, the page ends up rendering:

[object Object][object Object][object Object]

My desire is to have the output be more like: <Headline/><Headline/><Headline/>

Here is my code:

import React, { Component } from "react";

import Headline from "./Headline";

class TestPalette extends Component {
    testFunc() {
        let value;

        for (let i = 0; i < 5; i++) {
            value += <Headline></Headline>;
        }

        return value;
    }

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

export default TestPalette;

This returns fine:

testFunc() {
        let value = <Headline></Headline>;

        return value;
    }

I'm suspicious it would work if I wrapped the value variable in tags, but I don't know how to do that. The following code tries to wrap value in tags:

    testFunc() {
        let value;

        value = <div>;

        for (let i = 0; i < 5; i++) {
                value += <Headline></Headline>;
        }

        value += </div>;

        return value;
    }