title: Material-UI X: Could not find the data grid context
body: <p>I'm using <code>Data Grid Pro</code> component from Material-UI in my React app.</p>
  <p>I tried to create a custom toolbar for the <code>DataGridPro</code> component using <code>GridToolbarColumnsButton</code>, <code>GridToolbarFilterButton</code>, <code>GridToolbarDensitySelector</code>, and <code>GridToolbarExport</code> components from the same package with the <code>DataGridPro</code> component.</p>
  <p>I also could use a single <code>GridToolbar</code> component to replace all of the four components above.</p>
  <p>I need to create the custom toolbar component in a separate component file.</p>
  <p>I forked the code for custom toolbar example from Material UI here <a href="https://codesandbox.io/s/wduvx" rel="nofollow noreferrer">https://codesandbox.io/s/wduvx</a>
  and edited the code (separate the custom toolbar into a different component file) here <a href="https://codesandbox.io/s/data-grid-pro-toolbar-example-j004m" rel="nofollow noreferrer">https://codesandbox.io/s/data-grid-pro-toolbar-example-j004m</a></p>
  <p>Both of the codes work fine but when I created another example from scratch here  <a href="https://codesandbox.io/s/data-grid-pro-toolbar-mine-up6ik" rel="nofollow noreferrer">https://codesandbox.io/s/data-grid-pro-toolbar-mine-up6ik</a>, the code produced an error. It said that <code>Material-UI X: Could not find the data grid context</code> (as you can see in the codesandbox).</p>
  <p>Here are the dependencies (in package.json file):</p>
  <pre><code>&quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
  &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
  &quot;@material-ui/lab&quot;: &quot;^4.0.0-alpha.60&quot;,
  &quot;@material-ui/styles&quot;: &quot;^4.11.4&quot;,
  &quot;@mui/x-data-grid&quot;: &quot;^4.0.0&quot;,
  &quot;@mui/x-data-grid-pro&quot;: &quot;^4.0.0&quot;,
  </code></pre>
  <p>What's the problem and what's the solution for this case?</p>