title: Warning: A string ref, ".$.$.$1", has been found within a strict mode tree
body: <p>I have a simple react app created using create-react-app and I am using react-stonecutter for my Grid. Getting this error in console when I try to pass data into a list item. Also if I don't use a button I can't see anything on the screen (the list is blank). I would like to use my own react component instead of button in the list.</p>
  <p>error text:</p>
  <blockquote>
  <p>Warning: A string ref, &quot;.$.$.$1&quot;, has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/KganE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KganE.png" alt="console error" /></a></p>
  <p>Code Setup:</p>
  <p>index.js:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;
  );
  
  reportWebVitals();
  </code></pre>
  <p>QuoteGrid.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import { CSSGrid, measureItems, makeResponsive } from 'react-stonecutter';
  import data from '../assets/DummyList.json';
  
  const Grid = makeResponsive(measureItems(CSSGrid), {
      maxWidth: 1920,
      minPadding: 100
  });
  
  const QuoteGrid = () =&gt; {
  
      return (
          &lt;div className=&quot;nav-bar-area&quot;&gt;
              &lt;Grid
                  className=&quot;quote-grid&quot;
                  component=&quot;ul&quot;
                  gutterWidth={5}
                  gutterHeight={5}
                  columnWidth={150}
                  duration={800}
              &gt;
                  {data.map((datum) =&gt; (
                      &lt;li className=&quot;grid-item&quot; key={datum.id}&gt;
                          &lt;button className=&quot;item-btn&quot; key={datum.id}&gt;
                              {datum.text}
                          &lt;/button&gt;
                      &lt;/li&gt;
  
                  ))}
              &lt;/Grid&gt;
          &lt;/div&gt;
      );
  }
  
  export default QuoteGrid;
  </code></pre>
  <p>DummyList.json:</p>
  <pre><code>[{
      &quot;id&quot;: 1,
      &quot;text&quot;: &quot;Who controls the British crown?&quot;
  }, {
      &quot;id&quot;: 2,
      &quot;text&quot;: &quot;Who keeps the metric system down?&quot;
  }]
  </code></pre>
  <p>please help! what am I doing wrong?</p>