Shadows not casting on other meshes

[ZEER0H]

For my capstone software project we are making the game quarto using reactjs and babylonjs. We have the scene set up, but we are importing multiple .glb files and while they cast shadows on themselves and on the ground, we cannot make the shadows cast from the pieces to the board. 

I feel like there is something that should be obvious. We have changed the directional light source. We have changed the ability of both pieces and board to cast and receive shadows. We have overlayed a shadowOnly material object over the board itself. Nothing has worked so far.

The meshes are created and textured in blender before being exported as .glb files.

here is our code, we don't have a playground because of local objects:

import React, { Component } from 'react';
import * as BABYLON from 'babylonjs';
import BabylonScene from './BabylonScene';
import * as BABYLON_LOADER from 'babylonjs-loaders';
import  sadObject from '../objects/tallLightFlatSquare.glb';
import yayObject from '../objects/tallLightHoleCylinder.glb';
import slightlyHappierObject from '../objects/gameBoard.glb';
import plainPlane from '../objects/thePlainPlane.glb';
import shortDarkFlatCylinder from '../objects/shortDarkFlatCylinder.glb';
import { PositionGizmo, ShadowGenerator } from 'babylonjs';

export default class Viewer extends Component {
    
    onSceneMount = (e) => {
        const { canvas, scene, engine } = e;

        // This creates and positions a free camera (non-mesh)
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);
        /*camera.lowerBetaLimit = 0.1;
        camera.upperBetaLimit = (Math.PI / 2) * 0.9;*/
        camera.lowerRadiusLimit = 10;
        camera.upperRadiusLimit = 150;
        camera.attachControl(canvas);
        // This targets the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());
        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        //const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        //var pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 1, 0), scene);
        var pointLight = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
        pointLight.position = new BABYLON.Vector3(20, 40, 20);
        var shadowGenerator = new BABYLON.ShadowGenerator(1024, pointLight);
        
        // Default intensity is 1. Let's dim the light a small amount
        //light.intensity = 2.7;
        pointLight.intensity = 10;
        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
        // const sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
        // Move the sphere upward 1/2 its height
        // sphere.position.y = 1;
      
        //Ground object
        // var ground = BABYLON.Mesh.CreateGround("ground", 15, 15, 1, scene, false);
        // var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
        // groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
        // groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        // ground.material = groundMaterial;
        // ground.receiveShadows = true;


        //Board Positions
        var board4 = new BABYLON.Vector3(-3.69, 0.069, 1.2);
        var board5 = new BABYLON.Vector3(-3.69, 0.069, -1.2);
        var board15 = new BABYLON.Vector3(3.73, 0.069, -3.85);

        //importing the board object    
        BABYLON.SceneLoader.ImportMesh("", slightlyHappierObject, "", scene, (newMeshes, particleSystems, skeletons) => {
            var board = newMeshes[0];
            board.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
            board.receiveShadows = true;
            shadowGenerator.getShadowMap().renderList.push(board);
            shadowGenerator.addShadowCaster(board, true);

            //var shadowBoard = board.clone("shadowBoard");
            //shadowBoard.material = new BABYLON.ShadowOnlyMaterial("shadowBoi", scene);
            // shadowBoard.position = new BABYLON.Vector3(0, .0001, 0);
            //shadowBoard.receiveShadows = true;
        } )

        //importing a piece
        BABYLON.SceneLoader.ImportMesh("",shortDarkFlatCylinder, "",  scene, (newMeshes, particleSystems, skeletons) => {
            var tallWhiteFlatSquare = newMeshes[0];
            tallWhiteFlatSquare.receiveShadows = true;
            shadowGenerator.getShadowMap().renderList.push(tallWhiteFlatSquare);
            tallWhiteFlatSquare.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4);
            tallWhiteFlatSquare.position = board5;

            var alsoTallWhiteFlatSquare = tallWhiteFlatSquare.clone("tallWhiteFlatSquare2");
            alsoTallWhiteFlatSquare.receiveShadows = true;
            alsoTallWhiteFlatSquare.position = board4;
            shadowGenerator.getShadowMap().renderList.push(alsoTallWhiteFlatSquare);

            shadowGenerator.addShadowCaster(tallWhiteFlatSquare, true);
            shadowGenerator.addShadowCaster(alsoTallWhiteFlatSquare, true);
        });

        //this is also importing a piece
        BABYLON.SceneLoader.ImportMesh("", yayObject, "", scene, (newMeshes, particleSystems, skeletons)=> {
            var yayLookingBoy = newMeshes[0];
            yayLookingBoy.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4);
            yayLookingBoy.position = board15;
            shadowGenerator.getShadowMap().renderList.push(yayLookingBoy);
            shadowGenerator.addShadowCaster(yayLookingBoy, true);
        });
        
        //heck if I know
       engine.runRenderLoop(() => {
            if (scene) {
                scene.render();
            }
        });
    }

    render() {               
        return (
            <BabylonScene onSceneMount={this.onSceneMount} />
        )
    }
}