How to use the mermaid.mermaidAPI.render function in mermaid

// console.log("Rendering");
    // console.log(input);
    // mermaidAPI.render(title, "graph TB;Loading;", diagram => {
    //   console.log("Rendered");
    //   setTimeout(
    //     () =>
    //       mermaidAPI.render(title, input, diagram => {
    //         console.log("Rendered");
    //         console.log(diagram);
    //         callback(diagram);
    //       }),
    //     200
    //   );
    // });

    mermaidAPI.render(title, input, diagram => {
      // console.log("Rendered");
      // console.log(diagram);
      callback({ diagram, input });
    });
  } catch (e) {
    console.log("Failed to generate diagram");
    console.log(e);
  }
}

const { children, config, height, width } = this.props
    const defaultConfig = {
      // If this is true, mermaid tries to re-render
      // using window.addEventListener('loaded', ...)
      // which screws it all up.
      startOnLoad: false,
      gantt: {
        useWidth: width,
        useHeight: height || null,
      },
    }
    const mermaidConfig = merge(defaultConfig, config)
    mermaidAPI.initialize(mermaidConfig)

    const doc = children.toString().trim()
    const diagram = mermaidAPI.render(doc)
    this.setState({
      diagram,
    })
  }

graphTxt += collection[i].id + '["' + stepname + '"]';
          graphTxt += '--"' + _.escape(v.name) + '(' + v.id + ')' + '"-->';
          const destStep = _.find(collection, { id: v2.step });
          graphTxt += destStep.id + '["' + _.escape(destStep.name) + '"];';
        });
      });
    }
    
    if (state) {
      const current_step = _.find(collection, { state });
      if (current_step) {
        graphTxt += ' style ' + current_step.id + ' fill:#ffffbd;';
      }
    }

    mermaidAPI.render('div', graphTxt, null, document.getElementById('chart'));
  }

public renderSVG() {
		const { value } = this.props;
		const { renderArea } = this;

		if (!renderArea || !value) {
			return;
		}

		try {
			mermaidAPI.render(this.id, value, (svgCode, bindFunctions) => {
				renderArea.innerHTML = svgCode;

				if (typeof bindFunctions === 'function') {
					bindFunctions(renderArea);
				}
			});
		} catch (error) {
			renderArea.innerHTML = `Unable to parse input: ${error.message}`;
		}
	}

render() {
    return <div></div>
  }

renderDiagram(code) {
    try {
      this.cleanupMermaidDiv()
      mermaidAPI.render(this.mermaidId, code, svg =>
        this.setState({ svg, error: null })
      )
    } catch (e) {
      this.setState({ error: e, svg: '' })
    }
  }
  cleanupMermaidDiv() {