Type de retour manquant sur une fonction qui renvoie un fragment de réaction

J'essaie actuellement de nettoyer certains avertissements ESLint sur mon projet, et je suis bloqué sur un type de retour manquant sur la fonction suivante. J'ai essayé de définir le type de retour sur React.ReactFragment, mais cela me donne une erreur sur tous les domaines où la fonction est appelée.

export const RightsTooltip = () =>
 <>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet./p>
 </>

Utilisation de la fonction :

<Group>
 <b>Additional rights</b>
 <Hint tooltip={<RightsTooltip/>}/>
</Group>

Erreur lorsque le type de retour est défini surReact.ReactFragment :

'RightsTooltip' cannot be used as a JSX component.
 Its return type 'ReactFragment' is not a valid JSX element.
 Type '{}' is missing the following properties from type 'ReactElement<any, any>': type, props, key

Solution du problème

Un composant fonctionnel React doit toujours renvoyer un fichier JSX.Element. C'est le type que vous voulez si vous exigez que tous les composants fonctionnels aient un type de retour explicite

export const RightsTooltip = (): JSX.Element =>
 <>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
 </>

Terrain de jeux