A-Frame & Three.js: Color map makes object white

Question

I'm trying to assign a new material to an object, but when I assign a new (color) map, the object renders as white, and the AO and shadows no longer show up. It's as if the emissive attribute is 100%. I can change the color attribute (e.g. 'red' or 'blue'), ao, normal, etc. without issues. The glb loaded in already has a working material with a color map and ao, but I want to be able to replace it.

I'm using 8th Wall with A-Frame, but I've registered the following as a custom Three.js component.

const customMat = {
  schema: {}, // will pass textures via aframe later
  init() {
    this.el.addEventListener('model-loaded', (e) => {

      const material = new THREE.MeshStandardMaterial()
      const texLoader = new THREE.TextureLoader()
      texLoader.crossOrigin = ''

      const mapColor = texLoader.load('assets/cover_color.jpg')
      const mapAO = texLoader.load('assets/cover_ao.jpg')

      material.map = mapColor  // makes everything 100% white likes it's emissive
      // material.color = new THREE.Color('red') // works fine no problem
      material.aoMap = mapAO
      material.aoMapIntensity = 1
    
      e.detail.model.traverse((mesh) => {
        if (mesh.isMesh) {
          mesh.material = material
          mesh.material.needsUpdate = true // not sure if needed
        }
      })
    })
  },
}
export {customMat}

Any suggestions would be much appreciated. I've tried this with primitive geometry too, but the same issue occurs. I don't seem to be able to modify the existing material's attributes either, so maybe my approach is fundamentally wrong.