React-circular-progressBar not showing initialAnimation - reactjs

Question

I have a progressBar component. The initial animation refuses to work in spite of setting initialAnimation to true. What am I missing?
Are there any extra CSS needed to fix it?
I just want the initialAnimation on the graph and number need not change
import React from 'react'
import CircularProgressbar from 'react-circular-progressbar'
import { withStyles } from '#material-ui/core/styles'
import Typography from '#material-ui/core/Typography'
import PropTypes from 'prop-types'
const styles = theme => ({
progressBar: {
width: '80px',
margin: 'auto',
marginTop: theme.spacing.unit + 4,
marginBottom: theme.spacing.unit + 4,
position: 'relative'
},
text: {
position: 'absolute',
top: 20,
left: 5,
paddingRight: '5px'
}
});
function StyledProgressbar(props) {
const { classes, palette } = props;
return (
<div className={classes.progressBar}>
<Typography variant="caption" align='center' className={classes.text}>
{props.percentage}% complete
</Typography>
<CircularProgressbar
percentage={props.percentage}
strokeWidth={10}
initialAnimation={true}
styles={{
path: {
stroke: palette.secondary.main,
strokeLinecap: 'round',
transition: 'stroke-dashoffset 0.5s ease 0s',
},
trail: {
stroke: palette.secondary.light,
strokeLinecap: 'round',
}
}}>
</CircularProgressbar>
</div>
);
}
StyledProgressbar.propTypes = {
classes: PropTypes.object,
percentage: PropTypes.number,
palette: PropTypes.object
}
export default withStyles(styles)(StyledProgressbar);

Answer 1

you just need to change this:
import CircularProgressbar from 'react-circular-progressbar';
from this:
import { CircularProgressbar } from 'react-circular-progressbar';
for more information refrence