Unable to access animation groups from mesh within React

Questions
1

Hey,

I’m having trouble manipulating a mesh when it loads. I seem to be following the instructions however, I am unable to access any other animation beyond the once that that my mesh initializes with.
I’m following the react integration tutorial via the docs.

let hero;

const onSceneReady = (scene) => {
  // This creates and positions a free camera (non-mesh)
  const camera = new UniversalCamera("cam", new Vector3(0, 3, -10), scene);
  const canvas = scene.getEngine().getRenderingCanvas();
  
  
  // This attaches the camera to the canvas

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;

  // loading in Girl Figure
  SceneLoader.Append("./", "Girl.glb", scene, function(newMeshes, particleSystems, skeletons, animationGroups){
    var hero = newMeshes[0];

    //Scale the model down        
    hero.scaling.scaleInPlace(0.1);

    //Lock camera on the character 
    camera.target = hero;

    //Get the Samba animation Group
    const sambaAnim = scene.getAnimationGroupByName("idle");

    //Play the Samba animation  
    sambaAnim.start(true, 1.0, sambaAnim.from, sambaAnim.to, false);

  })
  // Our built-in 'ground' shape.
  let ground = MeshBuilder.CreateGround("ground", { width: 10, height: 20 }, scene,);
};

/**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */
const onRender = (scene) => {
  if (hero !== undefined) {
    var deltaTimeInMillis = scene.getEngine().getDeltaTime();
    const rpm = 10;
  }
};

export default () => (
  <div>
    <HUD />
    <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id="my-canvas" />
  </div>
);
2

Want to reproduce this on the playground? There are so many factors that can influence your scene