I assume you've figured out a solution since your question was six months ago, but for posterity:

You'd want to create a < foreignObject x="20" y="20" width="160" height="160"> tag (you can set your own x, y, width, and height, of course) and place the img tag in there.

You can store your image in the src directory, import it into the file where the renderRectSvgNode component is, and refer to it by imported name in your image tag (import MyImage from "../assets/images/MyImage.jpg") if you have trouble rendering it from your public directory:

const renderRectSvgNode = ({ nodeDatum, toggleNode, 
foreignObjectProps = {} }) => (
    <React.Fragment>
        <foreignObject {...foreignObjectProps}>
            <img src={MyImage} height="200" width="200"/>
        </foreignObject>
        <g>
            <circle cx="0" cy="10" r="10" fill="blue" onClick={toggleNode} />
            <text fill="blue" strokeWidth="1" x="20">
                {nodeDatum.name}
            </text>
                {nodeDatum.attributes?.department && (
            <text fill="green" x="20" dy="20" strokeWidth="1">
                Department: {nodeDatum.attributes?.department}
            </text>)}
        </g>
    </React.Fragment>
);

Notice the foreignObjectProps prop that is brought in and also passed to . Essentially, it just needs a width and a height or else it won't be viewable (i.e., < foreignObject width=100 height=100>).

You may want to check out react-d3-dag library as well, it's a friendlier version built on top of react-d3-tree. I just came across it and will be using for representing a dag with less startup work involved. MixedNodeElement is a great example of the above.