Using context to update state in React

App.tsx

import { useState, createContext, useContext } from 'react'
import './App.css'

const StateContext = createContext<any>(null)

function Form() {
  const { state, setState } = useContext(StateContext)

  const handleClick = () => {

    setState({
      ...state,
      a: state.a +1,
      b: state.b -1
    })
  }

  return (
    <div>
      <h1>a: {state.a}</h1>
      <h1>b: {state.b}</h1>
      <button onClick={handleClick}>Add</button>
    </div>
  )
}

function App() {
  const initial_state = {
    a: 0,
    b: 0,
  }
  const [state, setState] = useState(initial_state)


  return (

    <StateContext.Provider value={{ state, setState }}>
      <Form />
    </StateContext.Provider>

  )
}

export default App