Codepen doesn't render my react code

[e2ma]

It worked with the create-react-app, but on codepen it doesn’t render anything. On console it shows “Object Error”. I tried commenting out everything except the return part and it rendered, I have no idea what’s wrong.
This is my Pen URL: https://codepen.io/e2ma/pen/xxaOLvw

Your code so far

import { useState } from "https://cdn.skypack.dev/react@17.0.1";


function App() {
  const [state, setState] = useState({ input: "hi" });
  function handleChange(event) {
    setState({ input: event.target.value });
  }
  return (
    <>
      <textarea id="editor" onChange={handleChange}></textarea>
      <div id="preview"></div>
    </>
  );
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

freeCodeCamp.org

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[camperextraordinaire]

You are trying to import two different versions of React. In the JS Settings section, you already have React 18 imported, but then you import React 17.0.01 in the JS Code. You can just add React. before the useState method and delete the import statement.