Les composants React externes ne sont pas rendus dans App.js

Je suis très nouveau dans react.js. Lorsque je travaillais sur un projet d'entraînement, j'ai rencontré cette étrange erreur. Certains composants d'un fichier js externe sont rendus lors de l'importation et d'autres non.

app.js:

import React from 'react';
const Hello = (props) => {
    return (
        <div>
            <h1>
                Hello {props.name}!
            </h1>
        </div>
    );
}

export default Hello;

FunctionalClick.js:

import React from 'react'

function fuctionalClick() {
    return (
        <div>
            <button>Click</button>
        </div>
    )
}

export default fuctionalClick

bonjour.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './components/hello'
import functionalClick from './components/fuctionalClick'

class App extends Component {
  render() {
    return (
      <div className="App">

        <Hello name='Lol   '></Hello>

        <functionalClick></functionalClick>
      </div>
    );
  }
}

export default App;

FunctionClick.js ne rend pas mais la première méthode fait (hello.js). Même lorsque la syntaxe que j'ai suivie, était presque la même. entrez la description de l'image ici