Custom widget with React

CustomWidget.jsx

const CustomWidget = createWidget({
  widget: {
    render({ state, helper }) {
      const refine = () => {
        const next = state.query === "" ? "Apple" : "";

        helper.setQuery(next).search();
      };

      return {
        currentRefinement: state.query,
        refine
      };
    }
  }
});

const App = () => (
  <CustomWidget>
    {({ refine, currentRefinement }) => (
      <p>
        <button onClick={refine}>
          {currentRefinement ? "Clear" : 'Search for "Apple"'}
        </button>
      </p>
    )}
  </CustomWidget>
);