Getting undefined while using Usereducer in react

Question

I am getting the below error while using UseReducer hook in react! I've destructured the state object however when I am using it I am getting this error!:-

  const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{});
  return (
    <>
      <h1 className="main-heading">Scientfic Calculator Using React JS</h1>
      <div className="container">
        <div className="output-container">
          <div className='previous-operand'>{previousOperand} {operation}</div>
          <div className='current-operand'>{currentOperand}</div>
        </div>
        <button className="clear-all">AC</button>
        <button>DEL</button>
        <OperationButton operation="/" dispatch={dispatch}/>
        <DigiButton digit="1" dispatch={dispatch}/>
        <DigiButton digit="2" dispatch={dispatch}/>
        <DigiButton digit="3" dispatch={dispatch}/>
        <OperationButton operation="*" dispatch={dispatch}/>
        <DigiButton digit="4" dispatch={dispatch}/>
        <DigiButton digit="5" dispatch={dispatch}/>
        <DigiButton digit="6" dispatch={dispatch}/>
        <OperationButton operation="+" dispatch={dispatch}/>
        <DigiButton digit="7" dispatch={dispatch}/>
        <DigiButton digit="8" dispatch={dispatch}/>
        <DigiButton digit="9" dispatch={dispatch}/>
        <OperationButton operation="-" dispatch={dispatch}/>       
        <DigiButton digit="." dispatch={dispatch}/>        
        <DigiButton digit="0" dispatch={dispatch}/>
        <button className="clear-all">=</button>
      </div>
    </>
  );
}

export default App; 

** This is the error:- Undefined undefined undefind till breakpoint execution

Someone please help me out with this!

[1]: https://i.stack.imgur.com/m4xOZ.jpg **