Tengo un problema relativamente sencillo al tratar de agregar secuencias de comandos en línea a un componente React. Lo que tengo hasta ahora:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

También he intentado:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Ninguno de los enfoques parece ejecutar el script deseado. Supongo que es algo simple que me estoy perdiendo. ¿Alguien puede ayudar?

PD: Ignora el foobar, tengo una identificación real realmente en uso que no tenía ganas de compartir.