REACT_STABLE_CONTEXT_PROVIDER_VALUE

When non-stable values (i.e. object identities) are used as the value prop for Context.Provider, React will trigger cascading updates to all components that use this context value on each render, causing needless re-renders (affecting application performance) or causing unintended consequences that may negatively affect the user-experience.

Examples of incorrect code for this rule:

return <SomeContext.Provider value={{ foo: 'bar' }}>...</SomeContext.Provider>;

Examples of correct code for this rule:

const foo = useMemo(() => ({ foo: 'bar' }), []);
 
return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;

One way to fix this issue may be to wrap the value in a useMemo(). If the value is a function then useCallback() can be used as well. See the above examples for a reference on how you might fix this by wrapping with useMemo.