Error: Target container is not a DOM element. Reactで動くコードがGatby.jsでは動きません。

Question

前提・実現したいこと

CodePenで動いているコードがあります。
https://codesandbox.io/s/pp3n7wnzvx?file=/src/index.js:0-598
これを、gatsby.jsで使おうとしています。

発生している問題・エラーメッセージ

「Gatsby develop」ではsuccessするのですが、ブラウザで開くとエラーが出ています。

Error: Target container is not a DOM element.

該当のソースコード

import React, {Component} from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class App extends Component {
  state = {
    index: 0
  }
  reload = () => {
    this.setState({
      index: this.state.index+1
    });
  }
  render() {
    return (
      <div style={styles}>
        <p>Hello</p>
        <button onClick={this.reload} >Reload</button>
        <iframe key={this.state.index} title="title" src="https://fr.wikipedia.org/wiki/Main_Page" />
      </div>
    );
  }
}

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

試したこと

idを変えたり、divで挟んだりしてみたのですが、状況に変わりありません。
CodePenで動いているReactのコードがGatsbyで動かないので、WebPackについて調べてみたりしたのですが、よくわかりませんでした。

補足情報（FW/ツールのバージョンなど）

ReactからGatsbyへのコードコピーでうまくいかないことがままあるので、基礎的な何かを見落としているのでは？と心配になり質問させていただきました。

Comments

[hoshi-takanori]

普通に React を使う場合、最後の行の render(<App />, document.getElementById("root")); で index.html の <div id="root"> に React 要素 <App /> を埋め込みます。
が、Gatsby は詳しくありませんが、どうやらすでに React を使っているようなので、render(<App />, 〜); はたぶん不要で、既存の Gatsby の React 階層のどこか (App を表示したい場所) にこの <App /> (App という名前だと他と被りそうですが…) を埋め込めばよいのでは。

[teratailerk]

ありがとうございます。render不要ということで、最後の行を、
export default App;
としたところ、無事動きました！

Answer 1

最後の行を、
export default App;
としたところ、無事動きました。

hoshi-takanoriさん、ありがとうございました。