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

Question

前提・実現したいこと

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

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

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

該当のソースコード

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

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/>
    // <InputRadio />;
  ) 
}

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

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/>
  ) 
}

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