title: React & Material UI Warning: "React does not recognize the `ATTRIBUTE` prop on a DOM element." I never declared ATTRIBUTE
body: <p>I have made a Horizontal Grid List in React with Material UI, but the GridListTile component is throwing 4 warnings (below) about attribute being on the <code>&lt;li&gt;</code></p>
  <blockquote>
  <p>in li (created by ForwardRef(GridListTile))</p>
  </blockquote>
  <p>the errors are regarding the Attributes: <code>disableElevation</code>, <code>disableFocusRipple</code>, <code>disableRipple</code>, <code>fullWidth</code>. all of which i have used elsewhere in the app, but not anywhere in this file or the children components.</p>
  <p><strong>Errors:</strong>
  <a href="https://i.stack.imgur.com/5Rq2M.png" rel="nofollow noreferrer">error in console, everything is the same in the other 3 attributes, including code line numbers</a></p>
  <pre><code>Warning: React does not recognize the `disableElevation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableelevation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  in li (created by ForwardRef(GridListTile))
  in ForwardRef(GridListTile) (created by WithStyles(ForwardRef(GridListTile)))
  in WithStyles(ForwardRef(GridListTile)) (at Feed.js:202)
  in div (created by ForwardRef(ButtonGroup))
  in ForwardRef(ButtonGroup) (created by WithStyles(ForwardRef(ButtonGroup)))
  in WithStyles(ForwardRef(ButtonGroup)) (at Feed.js:200)
  in ul (created by ForwardRef(GridList))
  in ForwardRef(GridList) (created by WithStyles(ForwardRef(GridList)))
  in WithStyles(ForwardRef(GridList)) (at Feed.js:199)
  in div (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at Feed.js:198)
  in div (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at Feed.js:197)
  in div (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at Feed.js:196)
  in div (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at Feed.js:221)
  in div (created by ForwardRef(Container))
  in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
  in WithStyles(ForwardRef(Container)) (at Feed.js:220)
  in Feed (created by Context.Consumer)
  in Route (at Routes.js:69)
  in Switch (at Routes.js:61)
  in Router (created by BrowserRouter)
  in BrowserRouter (at Routes.js:60)
  in ThemeProvider (at Routes.js:59)
  in Routes (at src/index.js:5)
  </code></pre>
  <p>here is the code for the GridList section</p>
  <pre><code>const feedButtons = () =&gt; {
  return (
    &lt;Grid item style={{ marginBottom: &quot;0.25rem&quot; }}&gt;
      &lt;Grid container direction=&quot;row&quot; justify=&quot;center&quot; alignItems=&quot;center&quot;&gt;
        &lt;Grid item className={classes.horizList}&gt;
          &lt;GridList className={classes.gridList} cols={2.5}&gt;   //this is line #199 in the code
            &lt;ButtonGroup variant=&quot;text&quot; aria-label=&quot;show fed item selection&quot;&gt;
              {typesArray.map((tile, i) =&gt; (
                &lt;GridListTile key={tile.label}&gt;
                  &lt;Button
                    color=&quot;secondary&quot;
                    onClick={() =&gt; setShow(tile.source)}
                  &gt;
                    {tile.label}
                  &lt;/Button&gt;
                &lt;/GridListTile&gt;
              ))}
            &lt;/ButtonGroup&gt;
          &lt;/GridList&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  );};
  </code></pre>
  <p>this is the return section of the component:</p>
  <pre><code>  return (
  &lt;Container disableGutters&gt;
    &lt;Grid
      container
      direction=&quot;column&quot;
      justify=&quot;flex-start&quot;
      alignItems=&quot;center&quot;
    &gt;
      {feedButtons()}
      {showItems()}
      {showError()}
    &lt;/Grid&gt;
  &lt;/Container&gt;
  </code></pre>
  <p>);</p>
  <p>It is all just a normal level React component besides the GridTile &amp; i don't know how go and change the inner workings of the GridTile component as is sort of suggested in this similar problem/answer:
  <a href="https://stackoverflow.com/questions/54468535/how-to-solve-warning-react-does-not-recognize-the-x-prop-on-a-dom-element">stackoverflow similar answer</a></p>
  <p>How do i get these warnings to go away, hopefully by fixing the issue, or via something else?</p>