title: D3 Types in NextJS React
body: <p>Why are my types not working here? I'm following this guide:
  <a href="https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app" rel="nofollow noreferrer">https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app</a>
  to make d3 work within React. I'm using Nextjs to do this and can't figure out why it's not picking up my types. If this answer is obvious, could you also accompany it with a link to reference?</p>
  <p>Thanks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import * as d3 from 'd3';
  
  export const useD3 = (renderChartFn, dependencies: Array&lt;any&gt;) =&gt; {
      const ref = React.useRef();
  
      React.useEffect(() =&gt; {
          renderChartFn(d3.select(ref.current));
          return () =&gt; {};
        }, dependencies);
      return ref;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "name": "_",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },
    "dependencies": {
      "d3": "^7.6.1",
      "next": "12.2.4",
      "react": "18.2.0",
      "react-dom": "18.2.0"
    },
    "devDependencies": {
      "@types/d3": "^7.4.0",
      "@types/d3-selection": "^3.0.3",
      "@types/node": "18.6.5",
      "@types/react": "18.0.17",
      "@types/react-dom": "18.0.6",
      "eslint": "8.21.0",
      "eslint-config-next": "12.2.4",
      "typescript": "4.7.4"
    }
  }</code></pre>
  </div>
  </div>
  
  <a href="https://i.stack.imgur.com/CtIpF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CtIpF.png" alt="enter image description here" /></a></p>