add CustomNode in Drag and Drop sidebar of ReactFlow

I created a Custom node with this article.

I want to add this in sidebar in this article.

I add this to sidebar.

import React from "react";
import "./DesignerPanel.css";
import input from "./assets/input.png";
import condition from "./assets/condition.png";
import end from "./assets/end.png";


import CustomNode from './CustomNode';

function DesignerPanel({
onSave,
onRestore,
flow,
onFileChange,
onFileUpload
}) {
const onDragStart = (event, nodeType) => {
event.dataTransfer.setData("application/reactflow", nodeType);
event.dataTransfer.effectAllowed = "move";
};

const nodeTypes = {
    selectorNode: CustomNode,
};

return (
  <div className="DesignerPanel__Shapes">
      <img
          src={input}
          alt="entry"
          className="DesignerPanel__Menu__img"
          onDragStart={(event) => onDragStart(event, "input")}
          draggable
      />
      <img
          src={condition}
          alt="calculation"
          className="DesignerPanel__Menu__img"
          onDragStart={(event) => onDragStart(event, "default")}
          draggable
      />
      <img
          src={end}
          alt="filtre"
          className="DesignerPanel__Menu__img"
          onDragStart={(event) => onDragStart(event, "output")}
          draggable
      />
      <img
          src={end}
          alt="filtre"
          className="DesignerPanel__Menu__img"
          onDragStart={(event) => onDragStart(event, "selectorNode")}
          draggable
      />
  </div>
  );
 }

 export default DesignerPanel;

but dont add this!