Help with MarkdownPreviewer and 'dangerouslyInsertInnerHTML'

I think I am close to implementing the markdown preview project in react. I can console.log the markdown, but for some reason I get an error when trying to insert the HTML. Here is the code:

//import { useState } from 'react';
const {useState} = React

//MAIN APP
function App(){
  const [text, setText]=useState("Test")

  function editorHandler(event){
    setText(event.target.value)
  }


  return( 
  <div>
      <h1> MARKDOWN PREVIEWER </h1>
      <Editor onChange={editorHandler} markDown={text}/>
      <Preview previewText={text}/>
  </div>
  )
}

ReactDOM.render(<App/>, document.getElementById("App"))


// EDITOR COMPONENT
function Editor(props){
  return(
  <div className="window">
    <h2>editor</h2>
    <textarea id="editor" value={props.markDown} onChange={props.onChange} placeHolder="Write something here"> </textarea>
  </div>
  )
}

// PREVIEW COMPONENT
function Preview(props){


 console.log(marked(props.previewText))  // works, outputs: <p>Test</p>

  function getMarkDownText() {
    const rawMarkup = marked(props.previewText)
    return {__html: rawMarkup};
  } 

  return(
  <div className="window">
      <h2>previewer</h2>
      <div id="preview" dangerouslySetInnerHTML={getMarkDownText()}> </div>
    </div>
  )
}

The problem seems to be with that last div (id preview). I get the following error message which is not very helpful: “Uncaught Invariant Violation: Minified React error #60

Codepen is here if easier: https://codepen.io/rpollock03/pen/RwWvYQb?editors=1011

Grateful for an explanation of what I’m doing wrong. I am learning React so apologies if this is something silly! I’ve tried reading the docs - the marked.js ones weren’t very clear in my opinion.