How to use the use-query-params.withQueryParams function in use-query-params

}

Tap.propTypes = {
  api: PropTypes.shape({
    PrefixedLink: PropTypes.func.isRequired,
  }).isRequired,
  autostart: PropTypes.string,
  isPageVisible: PropTypes.bool.isRequired,
  pathPrefix: PropTypes.string.isRequired,
};

Tap.defaultProps = {
  autostart: '',
};

export default withPageVisibility(withQueryParams(urlPropsQueryConfig, withContext(Tap)));

);
  }
}

TopRoutes.propTypes = {
  api: PropTypes.shape({
    PrefixedLink: PropTypes.func.isRequired,
  }).isRequired,
  isPageVisible: PropTypes.bool.isRequired,
  query: topRoutesQueryPropType.isRequired,
  setQuery: PropTypes.func.isRequired,
};

export default withPageVisibility(withQueryParams(topRoutesQueryConfig, (withContext(withStyles(styles, { withTheme: true })(TopRoutes)))));

<h1>There are {filters.length} filters active.</h1>
      <button>
          setQuery(
            { x: Math.random(), filters: [...filters, 'foo'], q: 'bar' },
            'push'
          )
        }
      &gt;
        Change All
      </button>
    
  );
};

export default withQueryParams(
  {
    x: NumberParam,
    q: StringParam,
    filters: ArrayParam,
  },
  UseQueryParamsExample
);

handleTapStop: PropTypes.func.isRequired,
  query: tapQueryPropType.isRequired,
  resourcesByNs: PropTypes.shape({}).isRequired,
  setQuery: PropTypes.func.isRequired,
  tapIsClosing: PropTypes.bool,
  tapRequestInProgress: PropTypes.bool.isRequired,
  updateQuery: PropTypes.func.isRequired,
};

TapQueryForm.defaultProps = {
  enableAdvancedForm: true,
  handleTapClear: _noop,
  tapIsClosing: false,
};

export default withQueryParams(urlPropsQueryConfig, withStyles(styles)(TapQueryForm));

'push'
                    )
                  }
                >
                  Change Push
                
              
            
          
        
      
    
  );
};

export default withQueryParams(queryConfig, WithQueryParamsExample);