Server Side Rendering in React not being invoked

Question

I'm obviously missing something here. I have a simple React class that I want to convert to using Server Side Rendering but I can't get the initial component to render on the server.

I've altered my initial App class to use renderToString

const App = ()=> {    
  var html = ReactDOMServer.renderToString(<div>
         <div className="jumbotron text-center">
           <h1>Welcome!</h1>
         </div>
         <div className="container">
           <MyComponent />
         </div>
       </div>);
   return html;
}

export default App;

I've updated the index.js file to use hydrate:

ReactDOM.hydrate(<App />, document.getElementById('root'));

I don't, however, get MyComponent rendered in the browser. What I get is the HTML for MyComponent displayed in the browser page. If, in the browser, I look at the page source, I can see that the component's HTML isn't being downloaded with the page (the root element used in hydrate is empty). When I use the Developer's Tools elements tab, I can see all of my component's HTML has been inserted into the root element inside a quoted string (which is why it's displayed in the browser page).

I'm assuming that's what's happening is that my component is not being rendered on the server but is still being invoked from the browser. The result is that my renderToString is returning a string to the client of all of my component's HTML which hydrate dutifully inserts into my root element.

What am I missing here? I created the application with npx create-react-app and am using version 16.8.0.