text: // The hook came from this article
  // https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app
  
  // import React, {useEffect, useRef} from 'react';
  // import * as d3 from 'd3';
  
  // export const useD3 = (renderChartFn, dependencies) => {
  //     const ref = useRef();
  //     useEffect(() => {
  //         renderChartFn(d3.select(ref.current));
  //         return () => {};
  //       }, dependencies);
  
  //     return ref;
  // }
  
  import React, {useEffect, useRef} from 'react';
  import * as d3 from 'd3';
  
  export const useD3 = (renderChartFn, dependencies) => {
      const ref = useRef();
      console.log('useD3(before useEffect) - ref, dependencies', ref, dependencies)
      useEffect(() => {
          console.log('useD3(after useEffect) - ref - dependencies', ref, dependencies)
          renderChartFn(d3.select(ref.current));
          return () => {};
        }, dependencies);
  
      return ref;
  }