Getting an error while using react context hook

See more:

ReactJS

why am i getting the following error?: 

Line 5:24:  React Hook "useContext" is called in function "firstChild" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  

The App File:
==========================================================

    import React, { createContext, useState } from 'react';
    import FirstChild from './firstChild';
    
    export const GlobalContext = createContext();
    
    function App() {
      const [color,setColor] = useState('green')
    
      return (
        <div className="App">
          <GlobalContext.Provider value={{appColor: color}} >
            <h1> This is App Component</h1>
          <FirstChild />
          </GlobalContext.Provider>
        </div>
      );
    }
    
    export default App;
============================================

another file 
===================================================
    import React, {useContext} from "react";
    import { GlobalContext } from './App';
    
    function firstChild(){
        const {appColor} = useContext(GlobalContext);
    
        return(
            <div>
                <h1 style={{color: appColor}}> this is first Child Compoennt  </h1>
            </div>
        )
    
    }
    
    export default firstChild;
==================================================

It is simple code for React Context Hooks. I don't know what i am missing?

The output i am expecting is the rendering of data inside h1 tag in the first file and in second file data inside h1 should render in green color 

What I have tried:

I have given the codes above. First is the 'App' File which is parent component to the 'firstChild' component