javascript - "Erro de análise: esperado '>'" ao criar um componente funcional em React com TypeScript

Estou tendo dificuldades para corrigir a sintaxe de um componente funcional no React. Existem vários erros como:

• { "owner": "typescript", "code": "2304", "severity": 8, "message": "Não é possível encontrar o nome 'div'.", "source": "ts", "startLineNumber": 20, "startColumn": 4, "endLineNumber": 20, "endColumn": 7 }

• { "proprietário": "typescript", "código": "2749", "gravidade": 8, "mensagem": "'GSM' refere-se a um valor, mas está sendo usado como um tipo aqui.", "fonte": "ts", "númeroDaLinhaInicial": 21, "colunaInicial": 5, "númeroDaLinhaFinal": 21, "colunaFinal": 8 }

• { "owner": "eslint", "severity": 8, "message": "Erro de análise: esperado '>'", "source": "eslint", "startLineNumber": 21, "startColumn": 8, "endLineNumber": 21, "endColumn": 8 }

import * as React from 'react';
import { GSM, gsm } from './contexts/gsm';
// import { API, refresh } from './contexts/api';
// import COMPX from './contexts/compx';
// import CHARTX from './contexts/chartx';
// import PROCESSOR from './contexts/processor';

interface ISource {
	data: string;
}

interface IRefresh {
	api: any;
}

const TESTCOPY = () => {
const _sources: ISource = { data: 'api' };
const _refresh: IRefresh = { api: refresh };
	return (
		<div>
			<GSM sources={_sources} refresh={_refresh} />
			// <API gsm={gsm} />
			// <COMPX gsm={gsm} />
			// <CHARTX gsm={gsm} />
			// <PROCESSOR gsm={gsm} />
		</div>
	);
};

export default TESTCOPY;

Você também pode encontrar o arquivo GSM aqui:

import React from 'react';

// STATE
const default_storage: object = { data: 3, switch: null, result: null };

// VARIABLE QUI STOCK LE STATE
let storage: object = default_storage;

// DICTIONNAIRE DES REFRESH DU CACHE, paramètres : key et force.
let GSM_refresh = {
	api: (k: string, f: boolean) => {},
	graph: (k: string, f: boolean) => {}, // compute
	lts: (k: string, f: boolean) => {}, // storage
	config: (k: string, f: boolean) => {} // config
};

// INITIALISATION DES DICTIONNAIRES GSM SOURCES ET LISTNENERS
let GSM_source: object = {};
let GSM_Listeners: object = {};

interface IGSM_listeners = {

}

// COPIE DU DICTIONNAIRE GSM_REFRESH QUI INCLUE LA PROPS REFRESH = API_REFRESH
const GSM_REFRESH = (refresh: object) => {
	GSM_refresh = {
		...GSM_refresh,
		...refresh
	};
};

// COPIE DU DICTIONNAIRE GSM SOURCE QUI INCLUE LA PROPS SOURCES (PASSE PAR LE COMPOSANT TESTCOPY)
const GSM_SOURCE = (sources: object) => {
	GSM_source = {
		...GSM_source,
		...sources
	};
};

const GSM_handleReset = (e: any) => {
	// ME RETOURNE UNE ARRAY AVEC LES KEYS DE STORAGE
	let keys = Object.keys({ ...storage, ...default_storage });
	// console.log(keys)
	// ME RETOURNE UNE COPIE DE L OBJECT STORAGE
	storage = { ...default_storage };
	// console.log(storage)
	keys.forEach((key) => {
		// console.log(key)
		if (GSM_Listeners.hasOwnProperty(key)) {
			for (let listener of GSM_Listeners[key]) {
				console.log(listener)
				console.log(storage[key]); // LES STORAGE KEYS SONT : 3, NULL, NULL, 6
				listener(storage[key]);
			}
		}
	});
};

// GSM READ
let GSM_read = (varName, force) => {
	if (GSM_source[varName] === 'api') {
		// LA DATA LUE CHANGE EN FONCTION DU RANDOM NUMBER, J ECRIS UN RANDOM NUMBER DANS DATA, LE REFRESH PROVOQUE UN WRITE
		GSM_refresh.api(varName, force);
	}
	return storage[varName];
};

// GSM WRITE
let GSM_write = (varName, newValue) => {
	// J'UPDATE LA VALEUR INITIALE DANS LE STORAGE
	storage = { ...storage, [varName]: newValue };
	// console.log("gsm.write >>", varName, newValue, default_storage)
	if (GSM_Listeners.hasOwnProperty(varName)) {
		for (let listener of GSM_Listeners[varName]) {
			// console.log(GSM_Listeners["data"])
			listener(newValue); // NEW VALUE => DATA, SWITCH ET RESULT
		}
	}
};

// GSM SUBSCRIBE
let GSM_subscribe = (varName, listener) => {
	// SI PAS DE LISTENER JE CREE UNE NOUVELLE ARRAY
	if (!GSM_Listeners.hasOwnProperty(varName)) {
		GSM_Listeners[varName] = new Array(0);
		// console.log(GSM_Listeners["data"])
	}
	// SI LISTENER JE PUSH DANS L ARRAY (les listeners sont)
	GSM_Listeners[varName].push(listener);
};

// Les listeners
// {data: COMPX_data_cb, PROCESSOR_result_D, switch: CHARTX_switch_cb, PROCESSOR_result_S, result: CHARTX_result_cb, CHARTX_result_cb2}

// sources et refresh sont des props venus depuis TESTCOPY
const GSM_init = (props) => {
	GSM_SOURCE(props.sources); // api
	GSM_REFRESH(props.refresh); // provoque un right d'une value si le cache est forcé, sinon pas d'écriture.

	return (
		<div>
			<button onClick={GSM_handleReset}>Reset</button>
			<br />
		</div>
	);
};

// J EXPORTE SOURCES ET REFRESH DE GSM + LES FONCTIONS  READ, WRITE ET SUBSCRIBE
export const GSM = GSM_init;
export const gsm = {
	read: GSM_read,
	write: GSM_write,
	subscribe: GSM_subscribe
};

Obrigado pela sua ajuda!