Allowed syntax for functional component's return statement? (React)

Came across the below code in the apollo docs today. I thought that when you have a multi-line return statement in a functional component that you have to wrap everything in parentheses? So, right after return you'd open the parentheses, like this: return(.

I'm confused why this return statement works:

export default function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

Edit: the suggested answer doesn't answer the question for me. I'd appreciate an answer that addresses the JSX also. For example, someone has said the () are not even necessary to wrap the JSX here so I'm extra confused why the material on this say to enclose a multi-line return statement in ().