Trying to set undefined property "ib" on object: Diagram ""

I’m currently working on adding images and creating a diagram in React, but I keep getting the following

error: “Trying to set an undefined property ‘ib’ on the Diagram object in GoJS.”

Where should I make the necessary modifications?

I will also show you the code I wrote.

Diagram.jsx

import React, { useEffect, useRef, useState } from 'react';
import * as go from 'gojs';

const Diagram = ({ imageUrl, shapes }) => {
    const diagramRef = useRef(null);
    const paletteRef = useRef(null);
    const [isAddingShape, setIsAddingShape] = useState(false);

    useEffect(() => {
        const initDiagram = () => {
            const $ = go.GraphObject.make;
            const diagram = $(go.Diagram, diagramRef.current);

            // 이미지를 배경으로 추가
            const image = $(go.Part, { layerName: 'Background', selectable: false });
            const picture = $(go.Picture, {
                source: imageUrl,
                width: NaN,
                height: NaN,
                imageStretch: go.GraphObject.Uniform,
            });
            image.add(picture);
            diagram.add(image);

            // 도형 추가 함수
            const addShape = (shapeKey, x, y) => {
                diagram.startTransaction('add shape');
                const shape = $(go.Shape, shapeKey, {
                    width: 100,
                    height: 50,
                    fill: 'rgba(0, 0, 0, 0)',
                    strokeWidth: 2,
                    stroke: 'red',
                });
                diagram.add(
                    $(go.Part, {
                        layerName: 'Foreground',
                        position: new go.Point(x, y),
                        selectable: false,
                    }),
                    shape
                );
                diagram.commitTransaction('add shape');
            };

            // 클릭 이벤트 핸들러
            const handleClick = (e) => {
                if (!isAddingShape) return;
                const point = diagram.lastInput.documentPoint;
                addShape(go.Shape.Rect, point.x, point.y);
                setIsAddingShape(false);
            };

            // 컨텍스트 메뉴 설정
            diagram.contextMenu = $(
                go.Adornment,
                go.Panel.Vertical,
                go.Panel.Auto,
                $(go.TextBlock, 'Add Shape', { margin: 4 }),
                {
                    click: (e, obj) => {
                        if (!isAddingShape) {
                            setIsAddingShape(true);
                        }
                    },
                }
            );

            // 이벤트 리스너 등록
            diagram.addDiagramListener('ObjectSingleClicked', handleClick);

            // 뒤로 가기 기능 설정
            diagram.undoManager.isEnabled = true;
            diagram.undoManager.canUndo = () => !isAddingShape;

            return diagram;
        };

        const diagram = initDiagram();
        diagramRef.current = diagram;

        return () => (diagram.div = null);
    }, [imageUrl, isAddingShape]);

    useEffect(() => {
        if (diagramRef.current) {
            const diagram = diagramRef.current;
            if (shapes && shapes.length > 0) {
                diagram.model = new go.GraphLinksModel(shapes);
            }
        }
    }, [shapes]);

    useEffect(() => {
        const initPalette = () => {
            const $ = go.GraphObject.make;
            const palette = $(go.Palette, paletteRef.current);

            palette.nodeTemplate = $(
                go.Node,
                'Auto',
                $(go.Shape, 'Rectangle', { width: 100, height: 50 })
            );
            const model = $(go.GraphLinksModel);
            model.nodeDataArray = [
                { key: 'shape1', category: 'Shape', shape: go.Shape.Rect },
                { key: 'shape2', category: 'Shape', shape: go.Shape.Ellipse },
                // 추가적인 도형들을 여기에 추가
            ];
            palette.model = model;

            return palette;
        };

        const palette = initPalette();
        paletteRef.current = palette;

        return () => (palette.div = null);
    }, []);

    return (
        <div style={{ width: '100%', height: '100%', display: 'flex' }}>
            <div
                ref={paletteRef}
                style={{ width: '200px', height: '100%', borderRight: '1px solid #ccc' }}
            ></div>
            <div style={{ flex: '1' }}>
                <div ref={diagramRef} style={{ width: '100%', height: '100%' }}></div>
                {imageUrl && <img src={imageUrl} alt="Selected" />}
            </div>
        </div>
    );
};
export default Diagram;

import React, { useState } from 'react';
import Diagram from './components/Diagram';

const App = () => {
    const [imageUrl, setImageUrl] = useState('');
    const [shapes, setShapes] = useState([]);

    // 이미지 업로드
    const handleImageUpload = (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onloadend = () => {
            const url = reader.result;
            setImageUrl(url);
        };

        if (file) {
            reader.readAsDataURL(file);
        }
    };

    return (
        <div>
            <h1>Image with Shapes</h1>
            <input type="file" accept="image/*" onChange={handleImageUpload} />
            <Diagram imageUrl={imageUrl} shapes={shapes} />
        </div>
    );
};

export default App;

What is the statement in initDiagram causing the exception?