renderCustomNodeElement prop not functioning

Question

I am using the react-d3-tree to render a tree chart. I want to use create a custom node by passing a function to the renderCustomNodeElement prop, but somehow it seems this prop is not accepting the value passed.

Here is the code:

import React, { useState, useEffect } from 'react';
import Tree from "react-d3-tree";
import { useCenteredTree } from "./helpers";
import "./Tree.css";
import Cookies from 'js-cookie';
import { load_tree } from '../actions/tree';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  tree: state.tree
});

const renderRectSvgNode = ({ nodeDatum, toggleNode }) => (
  <g>
    <rect width="20" height="20" x="-10" onClick={toggleNode} />
    <text fill="black" strokeWidth="1" x="20">
      {nodeDatum.name}
    </text>
    {nodeDatum.attributes?.department && (
      <text fill="black" x="20" dy="20" strokeWidth="1">
        Department: {nodeDatum.attributes?.department}
      </text>
    )}
  </g>
);


export function TreeGraph({tree}) {

  const containerStyles = {
    width: "100vw",
    height: "100vh"
  };

  const [translate, containerRef] = useCenteredTree();
  const nodeSize = { x: 100, y: 100 };
  const foreignObjectProps = { width: nodeSize.x, height: nodeSize.y, x: -100 };

  const makeTree = (familyData, CustomNodeElementFunction, nodeSize) => {
    console.log(CustomNodeElementFunction);
    return (
    <Tree
      data={familyData}
      rootNodeClassName="node__root"
      branchNodeClassName="node__branch"
      leafNodeClassName="node__leaf"
      translate={translate}
      nodeSize={nodeSize}
      renderCustomNodeElement={CustomNodeElementFunction}
      pathFunc="step"
      initialDepth="1"
      orientation="vertical"
    />
  );}

  return (

    <div dir="ltr" style={containerStyles} ref={containerRef}>
      { typeof  tree.payload !== 'undefined' && tree.payload.length > 0
      ? makeTree(tree.payload, renderRectSvgNode, nodeSize)
      : makeTree({}, renderRectSvgNode, nodeSize) }
    </div>
  );
}


export default connect(mapStateToProps)(TreeGraph);

Can someone see what is missing?