Reactでコンポーネントを分けようとするとエラーになってしまう

ProgateのReactで勉強をしていて手元のReact環境で同じように表示ができるか試しているんですがコンポーネントを別に書き出すとエラーになってしまい困っています。

現状

元々以下のようにAppの中にタイトルとメッセージを書いていたのですがこれを別コンポーネントにしたいと思いMainというコンポーネントを作ろうとしています。

import './App.css';
import Main from './Components/Main';
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Title</h1>
      <p>hoge message</p>
    </div>
  );
}

export default App;

移している段階のコード

import './App.css';
import Main from './Components/Main';
import React from 'react';

function App() {
  return (
    <div className="App">
      <Main />
    </div>
  );
}

export default App;

import React from 'react'

class Main extends React.Component {
    reander() {
        return(
            <div className='main'> 
                <div className='copy-container'>
                    <h1>Title</h1>
                    <p>hoge message</p>
                </div>
             </div>
        );
    }
}

export default Main;

上記のコード変更した状態でnpm startでページを表示すると以下のようなエラーが表示されてしまいます。

error
1TypeError: instance.render is not a function
2finishClassComponent
3node_modules/react-dom/cjs/react-dom.development.js:17485
4  17482 | } else {
5  17483 |   {
6  17484 |     setIsRendering(true);
7> 17485 |     nextChildren = instance.render();
8        | ^  17486 | 
9  17487 |     if ( workInProgress.mode & StrictMode) {
10  17488 |       disableLogs();
11View compiled
12updateClassComponent
13node_modules/react-dom/cjs/react-dom.development.js:17435
14  17432 |   shouldUpdate = updateClassInstance(current, workInProgress, Component, nextProps, renderLanes);
15  17433 | }
16  17434 | 
17> 17435 | var nextUnitOfWork = finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderLanes);
18        | ^  17436 | 
19  17437 | {
20  17438 |   var inst = workInProgress.stateNode;
21View compiled
22beginWork
23node_modules/react-dom/cjs/react-dom.development.js:19073
24  19070 | 
25  19071 |     var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
26  19072 | 
27> 19073 |     return updateClassComponent(current, workInProgress, _Component2, _resolvedProps, renderLanes);
28        | ^  19074 |   }
29  19075 | 
30  19076 | case HostRoot:
31View compiled
32HTMLUnknownElement.callCallback
33node_modules/react-dom/cjs/react-dom.development.js:3945
34  3942 | function callCallback() {
35  3943 |   didCall = true;
36  3944 |   restoreAfterDispatch();
37> 3945 |   func.apply(context, funcArgs);
38       | ^  3946 |   didError = false;
39  3947 | } // Create a global error event handler. We use this to capture the value
40  3948 | // that was thrown. It's possible that this error handler will fire more
41View compiled
42invokeGuardedCallbackDev
43node_modules/react-dom/cjs/react-dom.development.js:3994
44  3991 | // errors, it will trigger our global error handler.
45  3992 | 
46  3993 | evt.initEvent(evtType, false, false);
47> 3994 | fakeNode.dispatchEvent(evt);
48       | ^  3995 | 
49  3996 | if (windowEventDescriptor) {
50  3997 |   Object.defineProperty(window, 'event', windowEventDescriptor);
51
52.....長すぎて投稿できないので省略...
53View compiled
54unbatchedUpdates
55node_modules/react-dom/cjs/react-dom.development.js:22431
56  22428 | executionContext |= LegacyUnbatchedContext;
57  22429 | 
58  22430 | try {
59> 22431 |   return fn(a);
60        | ^  22432 | } finally {
61  22433 |   executionContext = prevExecutionContext;
62  22434 | 
63View compiled
64legacyRenderSubtreeIntoContainer
65node_modules/react-dom/cjs/react-dom.development.js:26020
66  26017 |   } // Initial mount should not be batched.
67  26018 | 
68  26019 | 
69> 26020 |   unbatchedUpdates(function () {
70        | ^  26021 |     updateContainer(children, fiberRoot, parentComponent, callback);
71  26022 |   });
72  26023 | } else {
73View compiled
74render
75node_modules/react-dom/cjs/react-dom.development.js:26103
76  26100 |     }
77  26101 |   }
78  26102 | 
79> 26103 |   return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
80  26104 | }
81  26105 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
82  26106 |   if (!isValidContainer(containerNode)) {
83View compiled
84Module.<anonymous>
85src/index.js:7
86   4 | import App from './App';
87   5 | import reportWebVitals from './reportWebVitals';
88   6 | 
89>  7 | ReactDOM.render(
90   8 |   <React.StrictMode>
91   9 |     <App />
92  10 |   </React.StrictMode>,
93View compiled
94Module../src/index.js
95http://localhost:3000/static/js/main.chunk.js:624:30
96__webpack_require__
97/Users/user/Documents/toolBox/github/ReactSample/webpack/bootstrap:856
98  853 | 
99  854 | __webpack_require__.$Refresh$.init();
100  855 | try {
101> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
102      | ^  857 | } finally {
103  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
104  859 | }
105View compiled
106fn
107/Users/user/Documents/toolBox/github/ReactSample/webpack/bootstrap:150
108  147 | 		);
109  148 | 		hotCurrentParents = [];
110  149 | 	}
111> 150 | 	return __webpack_require__(request);
112      | ^  151 | };
113  152 | var ObjectFactory = function ObjectFactory(name) {
114  153 | 	return {
115View compiled
1161
117http://localhost:3000/static/js/main.chunk.js:747:18
118__webpack_require__
119/Users/user/Documents/toolBox/github/ReactSample/webpack/bootstrap:856
120  853 | 
121  854 | __webpack_require__.$Refresh$.init();
122  855 | try {
123> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
124      | ^  857 | } finally {
125  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
126  859 | }
127View compiled
128checkDeferredModules
129/Users/user/Documents/toolBox/github/ReactSample/webpack/bootstrap:45
130  42 | 	}
131  43 | 	if(fulfilled) {
132  44 | 		deferredModules.splice(i--, 1);
133> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
134     | ^  46 | 	}
135  47 | }
136  48 | 
137View compiled
138Array.webpackJsonpCallback [as push]
139/Users/user/Documents/toolBox/github/ReactSample/webpack/bootstrap:32
140  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
141  30 | 
142  31 | 	// run deferred modules when all chunks ready
143> 32 | 	return checkDeferredModules();
144     | ^  33 | };
145  34 | function checkDeferredModules() {
146  35 | 	var result;
147View compiled
148(anonymous function)
149http://localhost:3000/static/js/main.chunk.js:1:99
150This screen is visible only in development. It will not appear if the app crashes in production.
151Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.