nodeSvgShape not recognized when using react-d3-tree with typescript

Question

When using the component from react-d3-tree, a few props that should work just aren't recognized/raise errors, some of those components being nodeSvgShape, nodeLabelComponent, allowForeignObjects, and probably more.

TreeCanvas.tsx:

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import Tree from 'react-d3-tree';
import './Nodes.css';

const treeData1 = {
  name: 'Family Title',
  className: 'node',
  children: [
    {
      name: 'Child 1',
      className: 'node',
      children: [
        {
          name: 'Grandchild 1',
          className: 'node',
        },
        {
          name: 'Grandchild 2',
          className: 'node',
        },
      ],
    },
    {
      name: 'Child 2',
      className: 'node',
      children: [
        {
          name: 'Grandchild 3',
          className: 'node',
        },
        {
          name: 'Grandchild 4',
          className: 'node',
        },
      ],
    },
  ],
};


const path = {
  pathFunc: (linkDatum: any, orientation: any) => {
    const { source, target } = linkDatum;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const x = orientation === 'vertical' ? source.x : source.y;
    const y = orientation === 'vertical' ? target.y : target.x;
    const deltaX = Math.abs(source.x - target.x);
    const deltaY = Math.abs(source.y - target.y);
    const radius = Math.min(deltaX, deltaY) / 2;
    const offsetY = y > source.y ? radius : -radius;
    return `M${source.x},${source.y} V${y + offsetY} H${target.x}`;
  },
};



const TreeCanvas = () => {
  const ref = useRef<HTMLDivElement>(null); // set the type of ref to HTMLDivElement

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [numbers, setNumbers] = useState([]);

  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    if (ref.current) { // make sure that ref.current is not null before accessing clientWidth and clientHeight
      setWidth(ref.current.clientWidth);
      setHeight(ref.current.clientHeight);
    }
  }, [numbers, ref.current]);

  useEffect(() => {
    function handleWindowResize() {
      if (ref.current) { // make sure that ref.current is not null before accessing clientWidth and clientHeight
        setWidth(ref.current.clientWidth);
        setHeight(ref.current.clientHeight);
      }
    }

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, [ref.current]);

  
  const svgSquare = {
    shape: 'rect',
    shapeProps: {
      width: 20,
      height: 20,
      x: -10,
      y: -10,
    }
  }

  const MyTree = ({ data }: any) => (
    
    <Tree
      data={data}
      orientation="vertical"
      translate={{ x: width / 2.35, y: height / 4 }}
      pathFunc={path.pathFunc}
      nodeSvgShape={svgSquare}
    />
  );

  return (
    <div id="treeCanvas" ref={ref}>
      <MyTree data={treeData1} />
    </div>
  );
};

export default TreeCanvas;

I've checked if all my dependencies are up to date, (they are), installed other versions of react-d3-tree (didn't fix the issue). The error seems to disappear from the console if i change .tsx to .jsx, but the whole component fails to render in that case.