Padding in transform doesn't give desired output

[deadcoder0904]

When a single digit number is shown then it is written as 7 instead of 07 even though in transform, there is a pad(00). Maybe the , is shown instead of 0 idk?

Same codesandbox demonstrating what I am talking about: https://codesandbox.io/s/flip-padding-not-working-bqmwg?file=/src/EventCountdown.js

Here's the code for brevity:

App.js

import React from "react";
import "@pqina/flip/dist/flip.min.css";
import { EventCountdown } from "./EventCountdown";

export default function App() {
  return (
    <div>
      <h1>Flip padding not working</h1>
      <h1>
        <EventCountdown value="2021-01-01T00:00:00+01:00" />
      </h1>
    </div>
  );
}

EventCountdown.js

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";

export const EventCountdown = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value);

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    return () => {
      counter.timer.stop();
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div className="tick">
      <div
        data-repeat="true"
        data-layout="horizontal fit"
        data-transform="preset(d, h, m, s) -> delay"
      >
        <div className="tick-group">
          <div
            ref={divRef}
            data-repeat="true"
            data-transform="pad(00) -> split -> delay"
          >
            <span data-view="flip" />
          </div>

          <span data-key="label" data-view="text" className="tick-label" />
        </div>
      </div>
    </div>
  );
};

[deadcoder0904]

I think this got solved in #12 as well :)