Full Calendar React icon component as custom header button

I'm trying to add an icon taken from the react-icons package as a custom header button in my Full Calendar. Because the icons are exported from the package and not used as class names I can't seem to render that icon or any icons for that matter. I was hoping you could do something like this:

const customButtons = {
        custom1: {
            icon: <MdWatchLater />,
            click: function () {
                ('clicked the custom button!');
            }
        }
    }

but that throws an error. However, this approach doesn't work either (using font awesome icons), it just renders a square:

const customButtons = {
        custom1: {
            icon: "fa fa-lock",
            click: function () {
                ('clicked the custom button!');
            }
        }
    }

Has anyone tried this before? I don't mind which approach to take just as long as I can load an icon as a custom button.

UPDATED

Posting my Full Calendar component taking in the custom buttons props for reference:

UPDATED Code snippet instead of photo:

<CustomCalendar
  customButtons={customButtons}
  header={{
     right: '',
     center: '',
     left: 'today prev,next custom1'
}} />