Durante a aula quando estava acompanhando o código

<ul>
        {Array.of('Trabalho', 'Trabalho', 'Estudo').map((categoria) => {
          return ( 
            <li>
            <div>{categoria}</div>
            <CardNota />
          </li>
            );
        })}

meu ESLint ficou sangrando e o erro era "Unexpected block statement surrounding arrow body; move the returned value immediately after the =>.eslint (arrow-body-style)".

No navegador o erro que aparecia era "src\components\ListaDeNotas.jsx Line 8:72: Unexpected block statement surrounding arrow body; move the returned value immediately after the =>" e nda de carregar o código.

Quando retirei o return e passei o código dessa forma

<ul>
        {Array.of('Trabalho', 'Trabalho', 'Estudo').map((categoria) => (
          <li>
            <div>{categoria}</div>
            <CardNota />
          </li>
        ))}
      </ul>
    );

ele funcionou perfeitamente como esperado.

Isso se deve pq é uma expressão só?? Se fossem mais ele precisaria do { return ()}; ???