Trying to add a button next to the filter

[dermotcarey-kgsa]

I'm trying to add a refresh button next to the filter bar. I thought I could do this with the filterRenderer prop (maybe there is a better way?). Here is where I am.

import React from 'react';
import ReactDOM from 'react-dom';
import Moment from 'moment';

import FileBrowser, { Filters } from 'react-keyed-file-browser';

export function App(props) {
  function doSomething() {
    console.log('This works great!');
  }
  return (
    <div className='App'>
      <FileBrowser
        files={[
          {
            key: 'cat.png',
            modified: +Moment().subtract(1, 'hours'),
            size: 1.5 * 1024 * 1024,
          },
          {
            key: 'kitten.png',
            modified: +Moment().subtract(3, 'days'),
            size: 545 * 1024,
          },
          {
            key: 'elephant.png',
            modified: +Moment().subtract(3, 'days'),
            size: 52 * 1024,
          },
        ]}
        filterRenderer={() => (
          <>
            <button onClick={doSomething}>Refresh</button>
            <Filters />
          </>
        )}
      />
    </div>
  );
}

But unfortunately, I get this error. Am I close?

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `filterRenderer`.
    at createFiberFromTypeAndProps (<anonymous>:19987:27)
    at createFiberFromElement (<anonymous>:20009:25)
    at createChild (<anonymous>:10805:36)
    at reconcileChildrenArray (<anonymous>:11008:35)
    at reconcileChildFibers (<anonymous>:11285:26)
    at reconcileChildren (<anonymous>:14348:39)
    at mountIndeterminateComponent (<anonymous>:15015:15)
    at beginWork (<anonymous>:15919:24)
    at HTMLUnknownElement.callCallback (<anonymous>:3113:24)