React hooks のエラーについて

前提・実現したいこと

React + jsの教材にて、クラスコンポーネントで表示されているものを
React + ts で関数的に書き直していて、下記のエラーとなり
原因がわからずにいます。

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

型 '() => void' を型 'FC<{}>' に割り当てることはできません。
  型 'void' を型 'ReactElement<any, any> | null' に割り当てることはできません。ts(2322)

該当のソースコード

TypeScript
1import React, {  useEffect, useState } from 'react';
2import ReactDOM from 'react-dom';
3import fs from 'fs';
4import path from 'path';
5
6const App: React.FC = () => {
7    const styles = require('./styles');
8    const Mastodon = require('mastodon-api');
9
10    const apiUri = 'https://pawoo.net/api/v1/';
11    const [mstdn, setMastdn] = useState(new Mastodon);
12    const [tootdata, setTootdata] = useState('');
13    const [timelines, setTimelines] = useState([]);
14
15    // APIクライアントの生成
16    const loadInfo = () => {
17        // アクセストークン取得
18        const f = path.join('.././createauth/token.json');
19        try {
20            fs.statSync(f);
21        } catch (err) {
22            window.alert('先にアクセストークンを取得してください。');
23            window.close;
24            return;
25        }
26
27        let token = fs.readFileSync(f);
28        // APIクライアント作成
29        setMastdn(new Mastodon({
30            access_token: token,
31            timeout_ms: 60 * 1000,
32            api_url: apiUri
33        })
34        )
35
36        // タイムラインの読み込み
37
38        const loadTimelines = () => {
39            mstdn.get('timelines/home', {})
40                .then((res: any) => {
41                    setTimelines(res.data);
42                })
43        }
44
45        // テキストボックスが更新されたときの処理
46        const handleText = (e: any) => {
47            mstdn.post(
48                'statuses',
49                { status: tootdata },
50                (err: any, data: any, res: any) => {
51                    if (err) {
52                        console.error(err);
53                        return;
54                    }
55                    setTootdata('');
56                    loadTimelines();
57                }
58            )
59        }
60        // タイムラインの部分を生成
61        const renderTimelines = () => {
62            const lines = timelines.map((e: any) => {
63                console.log(e);
64                // ブースとがあったときの処理
65                let memo = null;
66                if (e.reblog) {
67                    memo = (<p style={styles.reblog}>{e.account.display_name}さんがブースとしました</p>);
68                    e = e.reblog
69                }
70                // トゥートごとの描画内容
71                return (<div key={e.id} style={styles.content}>
72                    <img style={styles.avatar} src={e.account.avatar} />
73                    <div style={styles.ctext}>
74                        {memo}{e.account.display_name}
75                        <span dangerouslySetInnerHTML={{
76                            __html: e.content
77                        }} />
78                    </div>
79                    <div style={{ clear: 'both' }} />
80                </div>)
81            })
82            return (<div>
83                <h2 style={styles.title}>タイムライン</h2>
84                {lines}
85            </div>)
86        }
87
88        useEffect(() => {
89            loadInfo();
90            loadTimelines();
91            setInterval(() => {
92                loadTimelines()
93            }, 1000 * 30)
94        })
95
96        return (
97            <div>
98                <div style={styles.editorPad}>
99                    <h1 style={styles.title}>マストドンのクライアント</h1>
100                    <textarea
101                        style={styles.editor}
102                        value={tootdata}
103                        onChange={e => handleText(e)} />
104                    <div>
105                        <button onClick={e => handleText(e)}>トゥート</button>
106                    </div>
107                </div>
108                <div style={{ marginTop: 120 }} />
109                {renderTimelines()}
110            </div>
111        )
112    }
113}
114    ReactDOM.render(<App />, document.getElementById('root'));
115
116