I have a context like this

ProductProvider.js

import React, { createContext, useMemo } from 'react'

const INITIAL_HANDLER = {
  sortType:null,
  offset:0
}

export const ProductProviderContext = createContext({
  ...INITIAL_HANDLER,
  setHandler: () => null
})

export default ({ children }) => {
  const [data, setData] = React.useState(INITIAL_HANDLER)

  const setHandler = (value) => {
    setData({ ...data, ...value })
  }

  const contextValue = useMemo(() => (
    { ...data, setHandler }
  ), [data])

  return (
    <ProductProviderContext.Provider value={contextValue}>
      {children}
    </ProductProviderContext.Provider>
  )
}

And in one of my child component that has been wrapped inside ProductProvider I want to call setHandler but I want to access the last value of data like useState

so when I access a ProductProviderContext from child, I can use setHandler like useState (either passing changed value directly or using callback to get previous data value)

example usage that I expect setHandler accept:

setHandler({sortType:'popular'})
// or I can use it like this
setHandler(prevData => ({offset:prevData.offset++}))

any insight how do I refactor the setHandler so I can call setHandler like above?