Applying the custom made Mapbox map to deck.gl

Question

I made a map customized by Mapbox and trying to apply it to my deck.GL code. However, it does not work.

Here is my current code.I published my map and used default public access token of Mapbox. So this code works. But when I changed the style URL in "map" object from the basic dark map to the customized one, the map dispeared.

import {MapboxOverlay as DeckOverlay} from '@deck.gl/mapbox';
import {ColumnLayer} from '@deck.gl/layers';
import mapboxgl from 'mapbox-gl';

const token = "my token"

const INITIAL_VIEW_STATE = {
  longitude: 139.76545513443082,
  latitude: 37.681909230630325,
};

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v10',// This is the basic style
  accessToken: token,
  center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
  zoom: 4.5,
  pitch: 55,
  bearing: 0,
});

const dataset = './dataset.json';

const deckOverlay = new DeckOverlay({
  layers: [
    new ColumnLayer({
      id: 'Tokyo',
      data: dataset,
      diskResolution: 20,
      extruded: true,
      getPosition: d => [d.longitude, d.latitude],
      getElevation: d => d.price2023 / 150,
      getFillColor: d => {
        const value = d.net;
        if (value <= -20) {
          return [0, 0, 255, 255]; 
        } else if (value <= -10) {
          return [0, 255, 255, 255]; 
        } else if (value < 0) {
          return [173, 216, 230, 255]; 
        } else if (value === 0) {
          return [255, 255, 255, 255]; 
        } else if (value <= 10) {
          return [255, 255, 0, 255]; 
        } else if (value <= 20) {
          return [255, 165, 0, 255]; 
        } else {
          return [255, 0, 0, 255]; 
        }
      },      
      getLineWidth: 20, 
      radius: 100,
      pickable: true,
      onClick: ({object}) => {
        if (object) {
          showPanel(object.price2023);
        }
      }      
    }),
  ]
});

function showPanel(price2023) {
  const panelText = document.getElementById('panel-text');
  panelText.innerHTML = `Value: ${price2023}`;
  
  const sidebarPanel = document.getElementById('sidebar-panel');
  sidebarPanel.style.right = '0'; 

  const overlay = document.getElementById('overlay');
  overlay.style.display = 'block'; 
}

window.closePanel = closePanel;

function closePanel() {
  const sidebarPanel = document.getElementById('sidebar-panel');
  sidebarPanel.style.right = '-400px'; 

  const overlay = document.getElementById('overlay');
  overlay.style.display = 'none'; 
}

map.addControl(deckOverlay);
map.addControl(new mapboxgl.NavigationControl());

I tried to figure the problem out but couldn't.

Hope if someone can reach me out.