React context that can be updated from the consumer

settable-context.jsx

import React, { createContext, useState, useCallback } from 'react';

export const context = createContext({
  query: '',
  setQuery: () => undefined,
});

export function Provider({ children }) {
  const [query, setStateQuery] = useState('');
  const setQuery = useCallback((q) => setStateQuery(q), []);
  return <context.Provider value={{ query, setQuery }}>{children}</context.Provider>;
}