I use the rafce React code snippet in VS Code to generate a React arrow function while following along in a tutorial. In the tutorial the code generated by the shortcut looks like this:

import React from 'react';

const PostWidget = () => {
    return (
        <div>

        </div>
    )
};
export default PostWidget;

Whereas when I use the snippet (granted this is a few months after the tutorial has been published), I get a version without parentheses after return:

import React from 'react';

const PostWidget = () => {
  return <div></div>;
};
export default PostWidget;

Of course the code doesn't break if I leave it alone or just put some text in the div there. But if I bring the first div tag to its own line and try to line them up like so...

const PostWidget = () => {
  return 
    <div>
        PostWidget
    </div>;
};

I get a message from VS Code about "unreachable code" and the app breaks. I don't even know what to search in JavaScript wikis etc. to see what is going on here, does someone mind explaining to a JS noob? Thank you in advance.