How to use the @gitgraph/react.TemplateName.Metro function in @gitgraph/react

.add("metro", () => (
    
      {(gitgraph) => {
        const master = gitgraph
          .branch("master")
          .commit("one")
          .commit("two")
          .commit("three");
        const develop = gitgraph.branch("develop").commit("four");
        master.merge(develop);
      }}
    
  ))
  .add("blackArrow", () => (

function BasicScenario(props) {
  return (
    
      {(gitgraph) => {
        const master = gitgraph
          .branch("master")
          .commit("Init the project")
          .commit("Add README")
          .commit("Add tests");

        master.tag("v1.0");

        const newFeature = gitgraph.branch("new-feature");

.add("metro", () => (
    
      {(gitgraph) => {
        const master = gitgraph
          .branch("master")
          .commit("one")
          .commit("two")
          .commit("three");
        const develop = gitgraph.branch("develop").commit("four");
        master.merge(develop);
      }}
    
  ))
  .add("blackArrow", () => (

.add("without branch label", () => {
    const withoutBranchLabel = templateExtend(TemplateName.Metro, {
      branch: {
        label: {
          display: false,
        },
      },
    });

    return (
      
        {(gitgraph) => {
          gitgraph

.add("with custom branch labels", () => {
    const customBranchLabels = templateExtend(TemplateName.Metro, {
      branch: {
        label: {
          bgColor: "#ffce52",
          color: "black",
          strokeColor: "#ce9b00",
          borderRadius: 0,
          font: "italic 12pt serif",
        },
      },
    });

    return (

import * as React from "react";
import { storiesOf } from "@storybook/react";
import {
  Gitgraph,
  CommitOptions,
  BranchOptions,
  TagOptions,
  Mode,
  Orientation,
  templateExtend,
  TemplateName,
} from "@gitgraph/react";

import { createFixedHashGenerator } from "../helpers";

const withoutBranchLabels = templateExtend(TemplateName.Metro, {
  branch: { label: { display: false } },
});

storiesOf("gitgraph-react/6. Custom renders", module)
  .add("with render dot", () => {
    const renderDot: CommitOptions["renderDot"] = (commit) => (
      <svg width="30" height="30" viewBox="0 0 71.84 75.33" xmlns="http://www.w3.org/2000/svg">
        <g stroke="white" fill="{commit.style.dot.color}">
          <path d="M68.91,35.38c4.08-1.15,3.81-3-.22-3.75-3.1-.7-18.24-5.75-20.71-6.74-2.15-1-4.67-.12-1,3.4,4,3.53,1.36,8.13,2.79,13.47C50.6,44.89,52.06,49,56,55.62c2.09,3.48,1.39,6.58-1.42,6.82-1.25.28-3.39-1.33-3.33-3.82h0L44.68,43.79c1.79-1.1,2.68-3,2-4.65s-2.5-2.29-4.46-1.93l-1.92-4.36a3.79,3.79,0,0,0,1.59-4.34c-.62-1.53-2.44-2.27-4.37-2L36,22.91c1.65-1.12,2.46-3,1.83-4.52a3.85,3.85,0,0,0-4.37-1.95c-.76-1.68-2.95-6.89-4.89-10.73C26.45,1.3,20.61-2,16.47,1.36c-5.09,4.24-1.46,9-6.86,12.92l2.05,5.35a18.58,18.58,0,0,0,2.54-2.12c1.93-2.14,3.28-6.46,3.28-6.46s1-4,2.2-.57c1.48,3.15,16.59,47.14,16.59,47.14a1,1,0,0,0,0,.11c.37,1.48,5.13,19,19.78,17.52,4.38-.52,6-1.1,9.14-3.83,3.49-2.71,5.75-6.08,5.91-12.62.12-4.67-6.22-12.62-5.81-17S66.71,36,68.91,35.38Z"></path>
          <path d="M2.25,14.53A28.46,28.46,0,0,1,0,17.28s3,4.75,9.58,3a47.72,47.72,0,0,0-1.43-5A10.94,10.94,0,0,1,2.25,14.53Z"></path>
        </g></svg>