VSCodeで『JSX 式には 1 つの親要素が必要です。』が表示される

問題のコード

export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => {
                <span>{col.key}</span>
                <span>{col.value}</span>
            })}
        </div>
    )
};

上記のdata.map()内でエラーが表示されました。

原因

ReactのJSXは、常に一つの要素を返すというルールがあります。
例として、下記のようなコードは題名と同様のエラーが発生します。
１

export const sample = () => {
    return (
        <div>あいうえお</div>
        <div>はひふへほ</div>
    )
};

data.map等の処理は、JSX内に記述していても1つの要素を返すルールを満たしている必要があるようです。
下記のコードに書き換えたところエラー表示が消えました。

export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => {
                <>
                    <span>{col.key}</span>
                    <span>{col.value}</span>
                </>
            })}
        </div>
    )
};

最後に

慣れてきたらJSXやReactが裏でどのように動いているのかも勉強してみたいと思います。