How to use a font awesome icon to react-table v7 with expand / contract?

Question

I'm attempting to use react-table and its expand/contract functionality, but can't figure out how to replace the icon given in the documentation. I'm trying to use a font-awesome icon, but even with dangerouslySetInnerHTML I get a string, instead of the icon. Here is the example in the documentation: https://react-table.tanstack.com/docs/examples/sub-components

Here is the codesandbox: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/sub-components?file=/src/App.js:3192-3633

This is the block in question. I can add a simple string to replace the fingers, by '>' and '^' but need to use a span icon (font awesome):

 {
        // Make an expander cell
        Header: () => null, // No header
        id: 'expander', // It needs an ID
        Cell: ({ row }) => (
          // Use Cell to render an expander for each row.
          // We can use the getToggleRowExpandedProps prop-getter
          // to build the expander.
          <span {...row.getToggleRowExpandedProps()}>
            {row.isExpanded ? '👇' : '👉'}
          </span>
        ),
      },