electron+react use shell.openExternal An error was encountered

Question

// preload.js
import {ipcRenderer, contextBridge, shell} from 'electron'

// --------- Expose some API to the Renderer process ---------
contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: {
    on(...args: Parameters<typeof ipcRenderer.on>) {
      const [channel, listener] = args
      return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
    },
    off(...args: Parameters<typeof ipcRenderer.off>) {
      const [channel, ...omit] = args
      return ipcRenderer.off(channel, ...omit)
    },
    send(...args: Parameters<typeof ipcRenderer.send>) {
      const [channel, ...omit] = args
      return ipcRenderer.send(channel, ...omit)
    },
    invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
      const [channel, ...omit] = args
      return ipcRenderer.invoke(channel, ...omit)
    }
  },
  shell: {
      openExternal(url:string) {
        return shell.openExternal(url)
      },
  }
  // You can expose other APTs you need here.
  // ...
})

// react
console.log(window.electron)
window.electron.ipcRenderer.send("some-event","some message!")
window.electron.shell.openExternal('https://stackoverflow.com/')

The console gets: enter image description here

I exposed the ipcRenderer and shell in the preload, and it was no problem to print it, and it was no problem to use ipcRenderer, but it would report an error when using the shell.openExternal. Why cannot read properties of undefined (reading 'openExternal')