styleFunctionSx error if using with @material-ui/core

[tsekityam]

What did I do

Build the following app with materialui-daterange-picker and @material-ui/core as dependencies.

import React from "react";
import { DateRange, DateRangePicker } from "materialui-daterange-picker";
import Typography from "@material-ui/core/Typography";

const App = () => {
  const [open, setOpen] = React.useState(true);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  const toggle = () => setOpen(!open);

  return (
    <>
      <Typography>
        Start Date: {dateRange?.startDate?.toDateString()}
      </Typography>
      <Typography>End Date: {dateRange?.endDate?.toDateString()}</Typography>
      <DateRangePicker
        open={open}
        toggle={toggle}
        onChange={(range) => setDateRange(range)}
      />
    </>
  );
};

export default App;

CodeSandbox

What did I see

TypeError
(0 , $csb__system.styleFunctionSx) is not a function
    at $csb$eval (https://z6xeu.csb.app/node_modules/
material-ui/core/esm/Box/Box.js:9:54
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
    at $csb$eval (https://z6xeu.csb.app/node_modules/
material-ui/core/esm/Box/index.js:6:17
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
    at $csb$eval (https://z6xeu.csb.app/node_modules/
material-ui/core/esm/index.js:109:46
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
$csb$eval
https://z6xeu.csb.app/node_modules/materialui-daterange-picker/dist/index.es.js:23:18
V
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:101021
ee.evaluate
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113417
xe.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:124731
c
https://codesandbox.io/static/js/sandbox.dfd49e52a.js:1:113145
$csb$eval
/src/App.tsx:2
  1 | import React from "react";
> 2 | import { DateRange, DateRangePicker } from "materialui-daterange-picker";
  3 | import Typography from "@material-ui/core/Typography";
  4 | 
  5 | const App = () => {
View compiled
▶ 4 stack frames were collapsed.
$csb$eval
/src/index.tsx:3
  1 | import { render } from "react-dom";
  2 | 
> 3 | import App from "./App";
  4 | 
  5 | const rootElement = document.getElementById("root");
  6 | render(<App />, rootElement);
View compiled
▶ 10 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.

What did I expect

The app built successfully

What did I found

I need to add @material-ui/system as dependency to make the app works.

CodeSandbox