renderCustomNodeElement prop not functioning

[Momen-Mawad]

In the below code the prop renderCustomNodeElement does not render any custom values I provide. Every other prop seems to work fine except this one.

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 [dimensions, translate, containerRef] = useCenteredTree();
  const nodeSize = { x: 100, y: 100 };
  const foreignObjectProps = { width: nodeSize.x, height: nodeSize.y, x: -100 };

  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>
  );

  const makeTree = (familyData, CustomNodeElementFunction, nodeSize) => {
    console.log(CustomNodeElementFunction);
    return (
    <Tree
      data={familyData}
      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);

[Momen-Mawad]

It turned out I was using an old version of react-d3-tree and had to update it.