A simple react project unable to compile

I am learning about react hooks and useReducer hook is giving error, in console the error comes down like this:

"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

This is my App.js code:

import "./styles.css";
import React, { useReducer } from "react";
import DigitButton from "./DigitButton";

 export const ACTIONS = {
    ADD_DIGIT : 'add-digit',
    CHOOSE_OPERATION: 'choose-operation',
    CLEAR: 'clear',
    DELETE_DIGIT: 'delete-digit',
    EVALUATE: 'evaluate'
}

function reducer(state, {type, payload }) {
    switch(type){
        case ACTIONS.ADD_DIGIT:
            return{
                 ...state,
                CurrentOperand : `${state.CurrentOperand || ""}${payload.digit}` ,   
            }    
    }
}

function App(){

const [{CurrentOperand, PreviousOperand, Operator}, dispatch] = useReducer(reducer, {})

    return(
        <div className="calculator-grid">
            <div className="output">
                <div className="previous-output">{PreviousOperand} {Operator}</div>
                <div className="current-output">{CurrentOperand}</div>
            </div>

            <button className="span-two">AC</button>
            <button> DEL</button>
            <button> ÷</button>
            <DigitButton digit = "1" dispatch = {dispatch}></DigitButton>
            <button> 2</button>
            <button> 3</button>
            <button> *</button>
            <button> 4</button>
            <button> 5</button>
            <button> 6</button>
            <button> +</button>
            <button> 7</button>
            <button> 8</button>
            <button> 9</button>
            <button> -</button>
            <button> .</button>
            <button> 0</button>
            <button className="span-two"> =</button>
        </div>
    )
}

export default App();

This is the DigitButton.js code:

mport { ACTIONS } from "./App"

export default function DigitButton({ dispatch, digit }) {
  return (
    <button
      onClick={() => dispatch({ type: ACTIONS.ADD_DIGIT, payload: { digit } })}
    >
      {digit}
    </button>
  )
}

I tried to check if different react versions are conflicting each other and i did not find that to be the case. Also made a completely different project directory , still getting the same issue..

While exporting App you are executing it.

Instead of

export default App();

export the App function not the output of App

export default App;