Reactにて関数エラー

初学者です



index.js:1 ./src/conponemts/conponentA.js
  Line 4:23:  React Hook "useContext" is called in function "conponentA" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

というエラーが起きました

App.js


import React, { useReducer,createContext, useState} from 'react';
import './App.css';
import conponentA from './conponemts/conponentA';
import conponentB from './conponemts/conponentB';
import conponentC from './conponemts/conponentC';


export const CountContext = createContext()
const initialState = {
  firstCounter: 0,
  secondCounter: 10
}
const reducer =(state, action)=> {
  switch(action.type){
    case 'increment1':
     return {...state, firstCounter: state.firstCounter + action.value }
    case 'decrement1':
      return {...state, firstCounter: state.firstCounter - action.value }

          case 'reset':
      return initialState
    default:
      return state 
  }
}

function App() {
const [count, dispatch] = useReducer(reducer, initialState)
  return (

    <div className="App">
      <h1>カウント: {count.firstCounter}</h1>
      <CountContext.Provider
      value = {{ countState: count, countDispatch: dispatch}}>
      <conponentA/>
      <conponentB/>
      <conponentC/>
      </CountContext.Provider>

    </div>
  );
}

export default App;

conponentA.js


import React,{useContext} from 'react'
import {CountContext} from '../App'
function conponentA() {
  const CountContext =useContext(CountContext)
  return (
    <div>
       <button onClick={() => CountContext.countDispatch({type: 'increment1' ,value: 1})}>increment</button>
      <button onClick={() => CountContext.countDispatch({type: 'decrement1', value: 1})}>decrement</button>
      <button onClick={() => CountContext.countDispatch({type: 'reset'})}>reset</button>
    </div>
  )
}

export default conponentA

公式サイトにこういう物は乗っているのでしょうか？
検索してもうまく出てきませんでした
こういう場合はどこが疑わしいのでしょうか、、