title: Error when trying to use React useref in typescript
body: <p>Using React and typescript I am building a tabs component where you can scroll through tab links left to right at the top with overflow: scroll set. This works with a trackpad but I need to implement a method for mouse users so they can click and scroll much like in this codepen: <a href="https://codepen.io/thenutz/full/VwYeYEE" rel="nofollow noreferrer">https://codepen.io/thenutz/full/VwYeYEE</a>
  the code I have so far for the tab Links which sits above tab Content looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div className='container'&gt;
    &lt;div className='flex-row'
      sx={{ overflow: 'scroll',
      '::-webkit-scrollbar': { display: 'none' },
      display: flex,
      flexDirection: 'row',
      flexWrap: 'no-wrap' }}&gt;
      &lt;div className='tabLinks'
         sx={{display: 'flex', flexDirection: 'row', flexWrap: 'no-wrap'}}&gt;
        {React.Children.map(children, (child, index) =&gt; ( //LOOPS THROUGH TAB LINKS HERE ))}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The tabLinks div is the div that needs to be scrolled horizontally by both a trackpad and mouse(click and drag)</p>
  
  <p>my first attempt at doing this was using react useRef to creat a ref for div with ClassName 'tabLinks' </p>
  
  <pre><code>const ref = React.useRef&lt;HTMLDivElement&gt;(null)
  </code></pre>
  
  <p>This ref was then passed to the tabLinks div and I tried to implement the onMouseDown events as per the codepen example but ran into this error below: </p>
  
  <pre><code>Property 'offsetLeft' does not exist on type 'RefObject&lt;HTMLDivElement&gt;'
  </code></pre>
  
  <p>Any help would be really appreciated.</p>
  
  <p>EDIT: </p>
  
  <p>This is what I have tried so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>const ref = React.useRef&lt;HTMLDivElement&gt;(null)
    let startX
    let scrollLeft
  
  &lt;div className='container'&gt;
    &lt;div className='flex-row'
      sx={{ overflow: 'scroll',
      '::-webkit-scrollbar': { display: 'none' },
      display: flex,
      flexDirection: 'row',
      flexWrap: 'no-wrap' }}&gt;
          &lt;div
            className='items'
            sx={{
              display: 'flex', 
              flexDirection: 'row',
              flexWrap: 'no-wrap'
             }}
            ref={ref}
            onMouseDown={e =&gt; {
              isDown= true
              const offset = ref.current?.offsetLeft || 0
              startX = e.pageX - offset
              scrollLeft = ref.current?.scrollLeft
            }}
            onMouseUp={e =&gt; {
              isDown = false;
            }}
            onMouseLeave={e =&gt; {
              isDown = false
            }}
            onMouseMove={e =&gt; {
              if(!isDown) return;
              e.preventDefault();
              const x = e.pageX - (ref.current?.offsetLeft ?? 0)
              const walk = (x - startX) * 3; //scroll-fast
              ref.scrollLeft = scrollLeft - walk
              console.log(walk)
            }}
          &gt;
        {React.Children.map(children, (child, index) =&gt; ( //LOOPS THROUGH TAB LINKS HERE ))}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I now am getting this error </p>
  
  <pre><code>Uncaught TypeError: Cannot add property scrollLeft, object is not extensible
      at onMouseMove (index.tsx:102)
      at HTMLUnknownElement.callCallback (react-dom.development.js:149)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
      at invokeGuardedCallback (react-dom.development.js:256)
      at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
      at executeDispatch (react-dom.development.js:561)
      at executeDispatchesInOrder (react-dom.development.js:583)
      at executeDispatchesAndRelease (react-dom.development.js:680)
      at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
      at forEachAccumulated (react-dom.development.js:662)
  </code></pre>