Why does Electron's desktopCapturer return nothing (under the JSON tree), which causes a crash on my program?

Question

I tried to use desktopCapturer in Electron, but when I tried to fetch all available sources, it returns a null value in all of those sources. Here, I got an example of 4 sources displaying in the JSON tree, but it came up with no name. Here is the image of the JSON tree from the console.

As you can see, the name field is empty. When this happens, I often get a crash that I couldn't find the name of the sources. Here is the code when it's handy to solve the problem.

const { desktopCapturer } = require('@electron/remote');

const StartCapture = async () => {
  const AppSources = await desktopCapturer.getSources({ types: ['screen', 'window'] });
  console.log(AppSources)
  const SelSource = AppSources.find(Source => Source.name === 'Screen Name');
  
  if (!SelSource) {
    console.error('Screen source not found');
    return;
  }
  
  const VideoRenderer = document.createElement('video');
  VideoRenderer.srcObject = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: SelSource.id,
        minWidth: 960,
        maxWidth: 2560,
        minHeight: 480,
        maxHeight: 1440
      }
    }
  });
  
  VideoRenderer.play();
  
  const CanvasRenderer = document.getElementById('canvas-renderer');
  const CanvasCTX = CanvasRenderer.getContext('2d');
  
  setInterval(() => {
    CanvasCTX.drawImage(VideoRenderer, 0, 0, CanvasRenderer.width, CanvasRenderer.height);
  }, 1000 / 60);
};

document.getElementById('ui-start-capture').addEventListener('click', StartCapture);

In the entry side, I have already enabled the @electron/remote module. Here is a snippet.

require('@electron/remote/main').initialize()
    require('@electron/remote/main').enable(UIWindow.webContents)

Can anyone please help me on how to fix this problem? Thanks.