Framework used: React
3D Image: glb/gltf format
Rendered using: three.js packages
Mission: To insert a number to each of the object and display it above them 

Approach: I have tried to get the canvas element and then add a text using

    var parentofCanvas = document.getElementById("untitled.glb");
    var childCanvas = parentofCanvas.firstChild;
    var context = childCanvas.getContext("webgl");
    console.log(childCanvas);
    console.log(parentofCanvas.firstChild.nodeName);
    console.log(context);
    // var text = "Howdy World!";
    // context.font = "25px Arial";
    // context.fillStyle = "red";
    // var x = 50;
    // var y = 100;
    // context.fillText(text, x, y);
  }, []);

where x and y are the coordinates. I am getting an error saying fillText is not a function. So,what did I miss? Is there any other way to insert/render html elements in a 3D canvas image?

Link to codesandbox: https://codesandbox.io/s/dreamy-lichterman-lbb4z?file=/src/Test.js

(FYI: This is a forked project of dreamy-lichterman)