Stumped on the nuances of rendering a React string in a component

Question

Start with the usual npx react-create-app, and replace App.js with this stripped down version:

const MySvg = () => {
    return (
        <svg height="100" width="100">
            <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red"/>
        </svg>
    );
}

function App() {
    return (
        <div>
            <header className="App-header">
                <MySvg/>
            </header>
        </div>
    );
}

export default App;

This correctly displays a simple circle. But if I try to pass in the same string as a variable instead of 'hard coded':

const MySvg = () => {
    const svgData = '<svg height="100" width="100">' +
        '<circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red"/>' +
        '</svg>'
    return (
        {svgData}
    );
}

// this is unchanged...
function App() {
    return (
        <div>
            <header className="App-header">
                <MySvg/>
            </header>
        </div>
    );
}

export default App;

It blows up miserably with:

Uncaught Error: Objects are not valid as a React child (found: object with keys {svgData}). If you meant to render a collection of children, use an array instead.

Admittedly I'm still a novice at nodejs, and I'm grateful in advance for your assist!