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

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>
        ),
      },

You can't use span. Should be <FontAwesomeIcon icon={..} />. Here is the working codesandbox with font awesome. You must follow installation steps. Post that -

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faAngleUp } from "@fortawesome/free-solid-svg-icons";

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 ? (
      <FontAwesomeIcon icon={faAngleUp} />
    ) : (
      <FontAwesomeIcon icon={faAngleRight} />
    )}
  </span>
)

Output -