アロー関数の中カッコをつけるとエラーになる

前提・実現したいこと

1つ目のコードでは、エラーとなってしまいます。
しかし、「RadioBtnItems」の{}を無くす(2つ目のコード)とエラーがなくなり正常になりました。
{}が無くなると正常になる理由がわからないため質問させていただきます。

発生している問題・エラーメッセージ

RadioBtnItems(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

該当のソースコード

エラーになるソースコード

import
1import React from "react";
2
3const values = [
4  { id: 1, item: "red" },
5  { id: 2, item: "blue" },
6  { id: 3, item: "green" }
7];
8
9const RadioBtnItems = () => {
10  values.map((value) => {
11    return (
12        <label key={value.id}>
13          <input
14            type="radio"
15            value={value.item}
16          />
17          {value.item}
18        </label>
19    );
20  });
21}
22
23export default function App() {
24  return(
25    <RadioBtnItems/>
26    // <InputRadio />;
27  ) 
28}

エラーにならないソースコード

import "./styles.css";
import React from "react";

const values = [
  { id: 1, item: "red" },
  { id: 2, item: "blue" },
  { id: 3, item: "green" }
];

const RadioBtnItems = () => 
  values.map((value) => {
    return (
        <label key={value.id}>
          <input
            type="radio"
            value={value.item}
          />
          {value.item}
        </label>
    );
  });

export default function App() {
  return(
    　<RadioBtnItems/>
  ) 
}

よろしくお願い致します。