title: What typescript type do I assign d3.select() in order to be able select the SVG element using useRef hook?
body: <p>Im trying to add the correct type to my d3.select statement in order set the mySVG variable.</p>
  <pre><code>function App() {
    const [mySVG, setMySVG] = useState&lt;d3.Selection&lt;d3.BaseType, unknown, HTMLElement, any&gt;&gt;()
    const svgRef = useRef&lt;SVGSVGElement | null&gt;(null)
  
    useEffect(() =&gt; {
       setMySVG(d3.select(svgRef.current));
       
    }, [])
  
    return (
      &lt;svg ref= {svgRef}&gt;
  
  
      &lt;/svg&gt;
    );
  }
  </code></pre>
  <p>At the moment i get the error highlight below in the code where I have:</p>
  <p>setMySVG(<strong>d3.select(svgRef.current)</strong>);</p>
  <blockquote>
  <p>Select the specified node element.</p>
  </blockquote>
  <blockquote>
  <p>The first generic &quot;GElement&quot; refers to the type of element to be selected. The second generic &quot;OldDatum&quot; refers to the type of the datum, on the selected element. This is useful when re-selecting an element with a previously set, know datum type.</p>
  </blockquote>
  <blockquote>
  <p>@param node — An element to be selected</p>
  </blockquote>
  <blockquote>
  <p>Argument of type 'Selection&lt;SVGSVGElement | null, unknown, null, undefined&gt;' is not assignable to parameter of type 'SetStateAction&lt;Selection&lt;BaseType, unknown, HTMLElement, any&gt; | undefined&gt;'.
  Type 'Selection&lt;SVGSVGElement | null, unknown, null, undefined&gt;' is not assignable to type 'Selection&lt;BaseType, unknown, HTMLElement, any&gt;'.</p>
  </blockquote>
  <blockquote>
  <p>The types of 'select(...).select(...).select(...).data' are incompatible between these types.
  Type '{ (): undefined[]; (data: NewDatum[] | Iterable, key?: d3.ValueFn&lt;any, NewDatum | undefined, import(&quot;/Users/logithangunaratnam/JavascriptProjects/practice_graph_creator/frontend/node_modules/@types/styled-components/node_modules/@types/react/index&quot;).ReactText&gt; | undefined): d3.Selection&lt;...&gt;; &lt;Ne...' is not assignable to type '{ (): undefined[]; (data: NewDatum[] | Iterable, key?: d3.ValueFn&lt;any, NewDatum | undefined, import(&quot;/Users/logithangunaratnam/JavascriptProjects/practice_graph_creator/frontend/node_modules/@types/styled-components/node_modules/@types/react/index&quot;).ReactText&gt; | undefined): d3.Selection&lt;...&gt;; &lt;Ne...'. Two different types with this name exist, but they are unrelated.
  Types of parameters 'data' and 'data' are incompatible.
  The 'this' types of each signature are incompatible.
  Type 'null' is not assignable to type 'HTMLElement'.</p>
  </blockquote>
  <p>I have gotten it to work by replacing the types with any but I want to be able to assign the correct associated types.</p>