canvas 우클릭시 나타나는 에러

에러 내용

×
NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

해당 코드

const [context, setContext] = useState(false);
    
// 마우스 클릭 이벤트
canvas.on("mouse:down", (e) => {
	if (e.button === 2) {
     canvas.remove(e.target);
    }
	if (e.button === 3) {
	// context menu
		return setContext(true);
	}
});

return (
		<CanvasSection>
			{context ? <ContextMenu /> : ""}
			<>

해결

아래로 위치 옮기니깐 해결됨

	return (
		<CanvasSection>
			<>
				<canvas id="canvas" />
				<MenuSection>
					<li onClick={() => setMenuNum(0)}>
						<img src={caseIcon} alt="caseIcon" />
						<div>케이스</div>
					</li>
					<li onClick={() => setMenuNum(1)}>
						<img src={shapeIcon} alt="shapeIcon" />
						<div>도형</div>
					</li>
					<li onClick={() => setMenuNum(2)}>
						<img src={textIcon} alt="textIcon" />
						<div>텍스트</div>
					</li>
					<li onClick={() => setMenuNum(3)}>
						<img src={imageIcon} alt="imageIcon" />
						<div>이미지</div>
					</li>
					<li onClick={() => setMenuNum(4)}>
						<img src={palleteIcon} alt="palleteIcon" />
						<div>색상</div>
					</li>
					<li onClick={() => setMenuNum(5)}>
						<img src={strokeIcon} alt="strokeIcon" />
						<div>테두리</div>
					</li>
					<button onClick={saveHandler}>저장</button>
				</MenuSection>
			</>
			{context && (
				<ContextMenu
					point={point}
					canvas={canvas}
					contextMenuHandler={contextMenuHandler}
				/>
			)}
            ```