Placing text over svg image - reactjs

Question

I am using a git repository to display a chessboard:
https://github.com/shaack/cm-chessboard
An example of the displayed chessboard can be found here:
https://shaack.com/projekte/cm-chessboard/
My goal is to display some text over a square of my choice, which would display over the piece if it is present. So I presume that involves some kind of z-index on the svg.
I've done inspect on the chessboard to see what the source code looks like, but I am at a loss for how to add a function that works like this:
function(coordinate,text), where coordinate could be something like c2.
How would you go about creating this function?
I am at a loss of where to start. I've been looking at the source code in the git file and commenting the code to get a better understanding. Ideally I would like a function that doesn't alter the git repository, because then if they do an update, my code won't break. Maybe I need to add a function that modifies the instance of the board object.
Any help is greatly appreciated.

Answer 1

I did a modern Chessboard (only to show the power of Web Components)
Problem with the "traditional" approach is you can NOT extend on it;
without taking the source code and changing it.
Modern Web Components can be extended WITHOUT needing the source code.
Below is ALL code required to add the label( square , label ) functionality you are after.
Better yet, same code in: https://jsfiddle.net/WebComponents/jvpm875b/
One issue.. the square-label is still shown; because my CSS was created to hide the square-label when there is a Chess-Piece in the square. You have to dig into the CSS to change that.
ChessMeister was an experiment, meant to be a BaseClass for Web Component developers; it has the UNlicense on it.. so you are free to use it (and you can't sue me)
https://chessmeister.github.io/
<script src="https://chessmeister.github.io/elements.chessmeister.js"></script>
<script>
customElements.define( "chess-board",
class extends customElements.get("chessmeister-board") {
connectedCallback() {
super.connectedCallback(); // execute <chessmeister-board>
let style = document.createElement("style");
style.innerHTML = `#labels div{background:rgb(100,100,0,.5);font:16px Arial;color:red;display:flex;align-items:center;justify-content:center}`
this.shadowRoot.append(style);
this.labels = this.addlayer("labels");
this.label("A7", "Make");
this.label("B7", "Your");
this.label("C7", "Own");
this.label("D7", "Chess");
this.label("E7", "Board");
}
label(square = "A8", label = "LABEL") {
let div = document.createElement("div");
div.setAttribute("at", square);
div.innerHTML = label;
this.labels.append(div);
return div;
}
})
</script>
<chess-board fen="4r3/8/2p2PPk/1p6/pP2p1R1/P1B5/2P2K2/3r4"></chess-board>