Typwriter not typing in react-modal

[mdodge-ecgrow]

I'm not sure why I'm not seeing any text typing in my app. I have a react-modal component that I want to start typing as soon at it is open.

Here is the complete component:

import ReactModal from 'react-modal';
import { ModalStyles } from '../assets/styles/ModalStyles';
import PuffLoader from 'react-spinners/PuffLoader';
import Typewriter from 'typewriter-effect/dist/core';
import CloseButton from './CloseButton';

const ProgressModal = (props: {
    openProgressModal: boolean;
    setOpenProgressModal: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
    const { openProgressModal, setOpenProgressModal } = props;

    var firstTypewriter = new (Typewriter as any)(
        document.querySelector('.type-first'),
        { devMode: true }
    );
    const typeFirstProgress = () => {
        firstTypewriter
            .typeString('Duplicating the Sermon Slides template file: ')
            .start();
    };

    return (
        <ReactModal
            isOpen={openProgressModal}
            style={ModalStyles}
            className={'progress-modal'}
            closeTimeoutMS={1000}
            onAfterOpen={typeFirstProgress}
        >
            <CloseButton setOpenModal={setOpenProgressModal} />
            <div className={'d-flex flex-column align-items-center my-4'}>
                <PuffLoader color="#36d7b7" size={150} />
                <div className={'progress-text p-3'}>
                    <div className="type-first"></div>
                    <div className="second"></div>
                </div>
            </div>
        </ReactModal>
    );
};

export default ProgressModal;

In my console with devMode on, I see a whole bunch of these:

[mdodge-ecgrow]

I just tested it on the main page outside of the modal and it seems to work fine there.