Cursor style problem: can not override --ti-cursor-font-size css variable

[m19v]

In React project, I am having an issue with cursor's style, when I pass html tag with class as an argument to type() function.
I can not override css variable introduced in root (e.g. --ti-cursor-font-size) locally in my css class . It affects font style but NOT cursor style.

import { renderToStaticMarkup } from "react-dom/server";
import TypeIt from "typeit-react";
import styles from "./index.module.css";
import "./styles.css";

export default function App() {
  const spanClass = styles.myReactClass;

  return (
    <>
      <TypeIt className={styles.myReactClass}>
        Cursor OK, CSS class:myReactClass TypeIt: without instance!
      </TypeIt>
      <TypeIt
        getBeforeInit={(instance) => {
          instance
            // .break({ delay: 750 })
            // .type('<span class="myClass">Hello World!</span>')
            .break({ delay: 750 })
            .type(
              `<span class="${spanClass}">Cursor NOK, CSS class:myReactClass; TypeIt: with instance; type func: 1!</span>`
            )
            .break({ delay: 750 })
            .type(
              renderToStaticMarkup(
                <span className={styles.myAnotherReactClass}>
                  Cursor NOK, CSS class:myAnotherReactClass; TypeIt: without
                  instance; type func: 2!
                </span>
              )
            );
          return instance;
        }}
      />
    </>
  );
}

For further details please check the question I posted on StackOverflow and for visual effect of the error here.