title: How to fix setState not updating in react context
body: <p>I am running into an issue where my context is not getting updated when I try to update it through a react hook. I have posted the code below and feel like I may be missing one slight blip.</p>
  
  <p><strong>appContext.tsx</strong></p>
  
  <pre><code>
  import React, { useState } from "react"
  import { ICreateContext } from "../types/generics"
  
  export interface IAppProviderState {
    isNightMode: boolean
  }
  
  const defaults = { isNightMode: false }
  const AppContext = React.createContext&lt;ICreateContext&lt;IAppProviderState&gt;&gt;([
    defaults,
    () =&gt; null,
  ])
  
  const AppProvider = (props: { children?: JSX.Element }) =&gt; {
    const [state, setState] = useState&lt;IAppProviderState&gt;({
      isNightMode: defaults.isNightMode,
    })
  
    return (
      &lt;AppContext.Provider value={[state, setState]}&gt;
        {props.children}
      &lt;/AppContext.Provider&gt;
    )
  }
  
  export { AppContext, AppProvider }
  
  </code></pre>
  
  <p><strong>appStore.tsx</strong></p>
  
  <pre><code>
  import { useContext } from "react"
  import { AppContext, IAppProviderState } from "../contexts/appContext"
  
  function useAppStore() {
    const [state, setState] = useContext(AppContext)
  
    function toggleNightMode(bool: boolean) {
      setState({
        isNightMode: bool,
      })
    }
  
    return {
      toggleNightMode,
      state,
    }
  }
  
  export { useAppStore }
  
  </code></pre>
  
  <pre><code>// somewhere in the view I use the useAppStore hook.
  // but using the method toggleNightMode, even though fires off on
  // appStore.tsx - is not updating the root context state.
  
  const { state, toggleNightMode } = useAppStore()
  
  //..e.g
  
  toggleNightMode(true);
  
  </code></pre>
  
  <p>I have removed the context and checked if the hook works with local state and it did update, sadly this is not the result I want.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thanks.</p>