Using StylesProvider in React-Admin root element causes error

I want to substitute jss for all my components at once, according to Material-UI documents I use StylesProvider on my root element like this:

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const App = () => (
  <StylesProvider jss={jss}>
    <Admin locale="ar" i18nProvider={i18nProvider} theme={theme} layout={layout}>
    </Admin>
  </StylesProvider>
);
export default App;

but I get this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

so what am I doing wrong?