I am new in `ReactJS` and I am creating a header and siderbar using @material-ui.

I have 2 files, `Sidebar.js`, `Header.js`.

On `Header.js` I have the following line:

```
 <IconButton onClick={toggleDrawer('left', true)} edge="start" className={classes.menuButton} color="inherit" aria-label="menu">

```

On `Sidebar.js` I have the default function to be exported named `Sidebar` and in that function I have the following lines:

```
function Sidebar(props) { 
    const classes = useStyles();
    const [state, setState] = React.useState({
        left: false
    });

    const toggleDrawer = (side, open) => event => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [side]: open });
    };

```

If I compile the project I receive the following error:

```
  ./src/components/Header/index.js
  Line 25:42:  'toggleDrawer' is not defined  no-undef

```

I suppose that it happens because I cannot access the function `toggleDrawer` by the file `Header.js`, but I don't know how to fix this.