How to use material UI default components

I have been using bootstrap and I found out that material ui is also a good framework and decided to start learning how to use it too. On getting to MUI component I got stuck. I want to know how to use the default MUI component without customizing it. For instance, I want to copy the card component and output it on the browser.

For instance, the code for one of the documents is:

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { Button, CardActionArea, CardActions } from '@mui/material';

export default function MultiActionAreaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image="/static/images/cards/contemplative-reptile.jpg"
          alt="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
      </CardActions>
    </Card>
  );
}

On trying to output that same component on the browser I do it this way:

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const DefaultCard = () => {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component=""
        alt="Yes"
        height="140"
        image=""
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

export default DefaultCard

However, I keep getting the following error

Error in ./~/@mui/material/node/ButtonBase/TouchRipple.js
Module parse failed: C:\dev\frontend\node_modules\@mui\material\node\ButtonBase\TouchRipple.js Unexpected token (257:46)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (257:46)
 @ ./~/@mui/material/node/ButtonBase/ButtonBase.js 34:42-66

Error in ./~/@mui/material/node/styles/createTransitions.js
Module parse failed: C:\dev\frontend\node_modules\@mui\material\node\styles\createTransitions.js Unexpected token (58:40)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (58:40)
 @ ./~/@mui/material/node/styles/createTheme.js 29:48-78

I know nothing about the error. I want someone to, please, help me to point out what I'm getting wrong and how I can eliminate it