title: Using forwardRef & useImperativeHandle to trigger child functions from parent
body: <p>I am trying to trigger two functions from a parent component by using forwardRef &amp; useImperativeHandle.  My code is below. I am not sure where I am going wrong but my code is failing to compile with the errors below. Please can someone advise? I thought i have defined the two functions in question that the compiler is complaining about. have I got the syntax wrong?</p>
  <pre><code>  const SimpleBackdrop = React.forwardRef((props, ref) =&gt; {
    const [open, setOpen] = React.useState(false);
    React.useImperativeHandle(ref, () =&gt; ({
      handleClose() {
        setOpen(false);
      },
      handleToggle() {
        setOpen(!open);
      },
    }));
  
    return (
      &lt;div&gt;
        &lt;Button onClick={handleToggle}&gt;Show backdrop&lt;/Button&gt;
        &lt;Backdrop
          sx={{ color: '#fff', zIndex: (theme) =&gt; theme.zIndex.drawer + 1 }}
          open={open}
          onClick={handleClose}
        &gt;
          &lt;CircularProgress color=&quot;inherit&quot; /&gt;
        &lt;/Backdrop&gt;
      &lt;/div&gt;
    );
  });
  
  export default SimpleBackdrop;
  </code></pre>
  <p>I am getting the following error in the console:</p>
  <p>Failed to compile.</p>
  <pre><code>[eslint] 
  src/components/myApp/SimpleBackdrop.js
    Line 44:24:  'handleToggle' is not defined  no-undef
    Line 48:18:  'handleClose' is not defined   no-undef
  </code></pre>
  <p>I have alos tried to re-write is as below, but still getting the same compile error:</p>
  <pre><code>import * as React from 'react';
  import Backdrop from '@mui/material/Backdrop';
  import CircularProgress from '@mui/material/CircularProgress';
  import Button from '@mui/material/Button';
  
  const SimpleBackdrop = (props, ref) =&gt; {
    const [open, setOpen] = React.useState(false);
  
    React.useImperativeHandle(ref, () =&gt; ({
      handleClose: () =&gt; setOpen(false),
      handleToggle: () =&gt; setOpen(!open)
    }));
  
    return (
      &lt;div&gt;
        &lt;Button onClick={handleToggle}&gt;Show backdrop&lt;/Button&gt;
        &lt;Backdrop
          sx={{ color: '#fff', zIndex: (theme) =&gt; theme.zIndex.drawer + 1 }}
          open={open}
          onClick={handleClose}
        &gt;
          &lt;CircularProgress color=&quot;inherit&quot; /&gt;
        &lt;/Backdrop&gt;
      &lt;/div&gt;
    );
  }
  
  export default React.forwardRef(SimpleBackdrop);
  </code></pre>