Uncaught Error: unknown type <custom:CustomShape>

When I try to create and add a custom shape in pallet in my React project, I facing this issue.

//CustomeContextPad
export default class CustomContextPad {
  constructor(config, contextPad, create, elementFactory, injector, translate) {
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    if (config.autoPlace !== false) {
      this.autoPlace = injector.get('autoPlace', false);
    }

    contextPad.registerProvider(this);
  }

  getContextPadEntries(element) {
    const {
      autoPlace,
      create,
      elementFactory,
      translate
    } = this;

    function appendServiceTask(event, element) {
      if (autoPlace) {
        const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
        autoPlace.append(element, shape);
      } else {
        appendServiceTaskStart(event, element);
      }
    }

    function appendServiceTaskStart(event) {
      const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
      create.start(event, shape, element);
    }

    function createCustomShape(event) {
      const shape = elementFactory.createShape({ type: 'custom:CustomShape' }); // Change 'custom:CustomShape' to your custom shape type
      if (autoPlace) {
        autoPlace.append(element, shape);
      } else {
        create.start(event, shape);
      }
    }

    return {
      'append.service-task': {
        group: 'model',
        className: 'bpmn-icon-service-task',
        title: translate('Append ServiceTask'),
        action: {
          click: appendServiceTask,
          dragstart: appendServiceTaskStart
        }
      },
      'append.custom-shape': {
        group: 'model',
        className: 'bpmn-icon-custom-shape', // Add appropriate CSS class for your custom shape icon
        title: translate('Append CustomShape'),
        action: {
          click: createCustomShape,
          dragstart: createCustomShape
        }
      }
    };
  }
}

CustomContextPad.$inject = [
  'config',
  'contextPad',
  'create',
  'elementFactory',
  'injector',
  'translate'
];
//customePallet
export default class CustomPalette {
  constructor(create, elementFactory, palette, translate) {
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
  }

  getPaletteEntries(element) {
    const {
      create,
      elementFactory,
      translate
    } = this;

    function createServiceTask(event) {
      const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });

      create.start(event, shape);
    }

    function createCustomShape(event) {
      const shape = elementFactory.createShape({ type: 'custom:CustomShape' }); // Change 'custom:CustomShape' to your custom shape type

      create.start(event, shape);
    }

    return {
      'create.service-task': {
        group: 'activity',
        className: 'bpmn-icon-service-task',
        title: translate('Create ServiceTask'),
        action: {
          dragstart: createServiceTask,
          click: createServiceTask
        }
      },
      'create.custom-shape': { // Define your custom shape entry
        group: 'custom',
        className: 'bpmn-icon-custom-shape', // Add appropriate CSS class for your custom shape icon
        title: translate('Create CustomShape'), // Tooltip text
        action: {
          dragstart: createCustomShape,
          click: createCustomShape
        }
      }
    }
  }
}
//index.js
import CustomContextPad from './CustomContextPad';
import CustomPalette from './CustomPalette';

export default {
  __init__: [ 'customContextPad', 'customPalette' ],
  customContextPad: [ 'type', CustomContextPad ],
  customPalette: [ 'type', CustomPalette ]
};
//app.js
import BpmnModeler from 'bpmn-js/lib/Modeler';

import customControlsModule from './custom';

import diagramXML from '../resources/diagram.bpmn';

const containerEl = document.getElementById('container');

// create modeler
const bpmnModeler = new BpmnModeler({
  container: containerEl,
  additionalModules: [
    customControlsModule
  ]
});

// import XML
bpmnModeler.importXML(diagramXML, (err) => {
  if (err) {
    console.error(err);
  }
});
//diagram.bpmn
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="_RdgBELNaEeSYkoSLDs6j-w" targetNamespace="http://activiti.org/bpmn">
  <bpmn2:process id="Process_1">
    <bpmn2:task id="Task_1" name="Examine Situation" qa:suitable="0.7">
      <bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing>
    </bpmn2:task>
    <bpmn2:sequenceFlow id="SequenceFlow_1" name="" sourceRef="Task_1" targetRef="ExclusiveGateway_1"/>
    <bpmn2:exclusiveGateway id="ExclusiveGateway_1" name="Things OK?">
      <bpmn2:incoming>SequenceFlow_1</bpmn2:incoming>
      <bpmn2:outgoing>SequenceFlow_2</bpmn2:outgoing>
      <bpmn2:outgoing>SequenceFlow_5</bpmn2:outgoing>
    </bpmn2:exclusiveGateway>
    <bpmn2:sequenceFlow id="SequenceFlow_2" name="" sourceRef="ExclusiveGateway_1" targetRef="EndEvent_1"/>
    <bpmn2:sequenceFlow id="SequenceFlow_5" name="" sourceRef="ExclusiveGateway_1" targetRef="EndEvent_2"/>
    <bpmn2:endEvent id="EndEvent_1" name="Notification Sent">
      <bpmn2:incoming>SequenceFlow_2</bpmn2:incoming>
      <bpmn2:messageEventDefinition id="MessageEventDefinition_1"/>
    </bpmn2:endEvent>
    <bpmn2:endEvent id="EndEvent_2" name="Error Propagated">
      <bpmn2:incoming>SequenceFlow_5</bpmn2:incoming>
      <bpmn2:errorEventDefinition id="ErrorEventDefinition_1"/>
    </bpmn2:endEvent>
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_Task_2" bpmnElement="Task_1">
        <dc:Bounds height="80.0" width="100.0" x="96.0" y="196.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_2" bpmnElement="EndEvent_1">
        <dc:Bounds height="36.0" width="36.0" x="396.0" y="300.0"/>
        <bpmndi:BPMNLabel>
          <dc:Bounds height="0.0" width="0.0" x="414.0" y="341.0"/>
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="_BPMNShape_ExclusiveGateway_2" bpmnElement="ExclusiveGateway_1" isMarkerVisible="true">
        <dc:Bounds height="50.0" width="50.0" x="276.0" y="210.0"/>
        <bpmndi:BPMNLabel>
          <dc:Bounds height="21.0" width="74.0" x="333.0" y="226.0"/>
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_1" bpmnElement="SequenceFlow_1" sourceElement="_BPMNShape_Task_2" targetElement="_BPMNShape_ExclusiveGateway_2">
        <di:waypoint xsi:type="dc:Point" x="196.0" y="236.0"/>
        <di:waypoint xsi:type="dc:Point" x="276.0" y="235.0"/>
        <bpmndi:BPMNLabel>
          <dc:Bounds height="6.0" width="6.0" x="214.0" y="236.0"/>
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_2" bpmnElement="SequenceFlow_2" sourceElement="_BPMNShape_ExclusiveGateway_2" targetElement="_BPMNShape_EndEvent_2">
        <di:waypoint xsi:type="dc:Point" x="301.0" y="260.0"/>
        <di:waypoint xsi:type="dc:Point" x="301.0" y="318.0"/>
        <di:waypoint xsi:type="dc:Point" x="396.0" y="318.0"/>
        <bpmndi:BPMNLabel>
          <dc:Bounds height="6.0" width="6.0" x="298.0" y="301.0"/>
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="_BPMNShape_EndEvent_3" bpmnElement="EndEvent_2">
        <dc:Bounds height="36.0" width="36.0" x="396.0" y="132.0"/>
        <bpmndi:BPMNLabel>
          <dc:Bounds height="0.0" width="0.0" x="414.0" y="173.0"/>
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_5" bpmnElement="SequenceFlow_5" sourceElement="_BPMNShape_ExclusiveGateway_2" targetElement="_BPMNShape_EndEvent_3">
        <di:waypoint xsi:type="dc:Point" x="301.0" y="210.0"/>
        <di:waypoint xsi:type="dc:Point" x="301.0" y="150.0"/>
        <di:waypoint xsi:type="dc:Point" x="396.0" y="150.0"/>
        <bpmndi:BPMNLabel>
          <dc:Bounds height="6.0" width="6.0" x="333.0" y="150.0"/>
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>
//index.html
<!DOCTYPE html>
<html>
<head>
  <title>bpmn-js-example-model-extension</title>

  <link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css" />
  <link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />
</head>
<body>
  <div id="container"></div>

  <script src="app.js"></script>
</html>
//webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    bundle: ['./app/app.js']
  },
  output: {
    path: __dirname + '/public',
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.bpmn$/,
        use: 'raw-loader'
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'assets/**', to: 'vendor/bpmn-js', context: 'node_modules/bpmn-js/dist/' },
      { from: '**/*.{html,css}', context: 'app/' }
    ])
  ],
  mode: 'development',
  devtool: 'source-map'
};
//package.json
{
  "name": "bpmn-js-example-custom-rendering",
  "version": "0.0.0",
  "description": "An example of creating custom rendering for bpmn-js",
  "scripts": {
    "all": "run-s lint build",
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --content-base=public --open",
    "lint": "eslint .",
    "start": "run-s dev"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/bpmn-io/bpmn-js-example-model-extension"
  },
  "keywords": [
    "bpmnjs-example"
  ],
  "author": {
    "name": "Philipp Fromme",
    "url": "https://github.com/philippfromme"
  },
  "contributors": [
    {
      "name": "bpmn.io contributors",
      "url": "https://github.com/bpmn-io"
    }
  ],
  "license": "MIT",
  "devDependencies": {
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^5.0.1",
    "eslint-plugin-bpmn-io": "^0.5.3",
    "npm-run-all": "^4.1.3",
    "raw-loader": "^0.5.1",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "bpmn-js": "^3.2.2",
    "diagram-js": "^3.1.3",
    "tiny-svg": "^2.2.1"
  }
}
//Error
Uncaught Error: unknown type <custom:CustomShape>
    at ./node_modules/moddle/lib/registry.js.Registry.mapTypes (registry.js:159:1)
    at ./node_modules/moddle/lib/registry.js.Registry.getEffectiveDescriptor (registry.js:184:1)
    at ./node_modules/moddle/lib/moddle.js.Moddle.getType (moddle.js:97:1)
    at ./node_modules/moddle/lib/moddle.js.Moddle.create (moddle.js:65:1)
    at ./node_modules/bpmn-js/lib/features/modeling/BpmnFactory.js.BpmnFactory.create (BpmnFactory.js:52:1)
    at ./node_modules/bpm