Stuck with error when trying to dynamically create step numbers for the progress bar

[dsolowitz]

Describe the bug
HERE is the error i'm catching in the console:
Uncaught TypeError: Cannot read property 'orientation' of undefined
Basically I have a component that has a dynamic amount of steps that is determined by the user. Im creating an array of numbers, mapping through said array and trying to renter them as step numbers in the progress bar.
Here is the code from app:

render() {
let pCent = (this.props.currentStep / this.props.totalSteps) *100
var steps = []
for(var i = 1; i < this.props.totalSteps ; i++) {
steps.push(i);
}
return (

<ProgressBar
percent={pCent}
//filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
>

{ steps.map((data, idx) => {
return

{idx + 1}

})}

      </ProgressBar>
  </div>
);

}
}

[dsolowitz]

for some reason adding a code block is being weird here...