Devextreme Reactive Errors on Base Client

I want to use Devextreme with Material Ui on my Typescript React app.I f开发者_JAVA技巧ound this docs and followed steps but it doesnt work. I also installed Material Ui dependencies but i doesnt work for simple datagrid. I really want to use them together.Please help me to fix bugs.On Google,people only adviced to use install packages again but i created new apps and installed them many times.

1- I created typescript react app with this command

npx create-react-app my-app --template typescript

2- Than i navigate this link to install necessary packages.And installed them

npm i --save @devexpress/dx-react-core @devexpress/dx-react-grid
npm i --save @devexpress/dx-react-grid-material-ui

3- Than i installed material ui dependencies from this link.

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install @fontsource/roboto
npm install @mui/icons-material

4-Than i created demo grid.And imported demo app to my main App.tsx

import React from 'react';
import Paper from '@mui/material/Paper';
import { Grid, Table, TableHeaderRow } from '@devexpress/dx-react-grid-material-ui';

const columns = [
  { name: 'id', title: 'ID' },
  { name: 'product', title: 'Product' },
  { name: 'owner', title: 'Owner' },
];
const rows = [
  { id: 0, product: 'DevExtreme', owner: 'DevExpress' },
  { id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
];

export default () => (
  <Paper>
    <Grid
      rows={rows}
      columns={columns}
    >
      <Table />
      <TableHeaderRow />
    </Grid>
  </Paper>
);


 //----------------------------------------------------


import React from 'react';
import logo from './logo.svg';
import './App.css';
import Demo from './demo';

function App() {
  return (
    <div className="App">
      <Demo />
    </div>
  );
}

export default App;

5-When i start my client with npm start,it gaves me 33 errors.I googled them but found nothing useful