Mapping data within mapped data

Example.jsx

/** @jsx jsx */
import { jsx, Box } from 'theme-ui'
import React from 'react'
import PropTypes from 'prop-types'
import ProgressBarGroup from '../ProgressBarGroup/ProgressBarGroup.jsx'
import LabeledProgressBar from '../../../../system/molecules/staticElements/LabeledProgressBar/LabeledProgressBar.jsx'
import Groups from '../progressBarData.js'

const App = ({
	groupGridColumns,
	groupsSubhead,
	progressLabel,
	done,
	...props
}) => {
	return (
		<>
			{Groups.map((group, id) => (
				<ProgressBarGroup
					key={id}
					groupGridColumns={group.groupGridColumns}
					groupSubhead={group.groupSubhead}
				>
					<Box>
						{group.bars.map((bar, id) => (
							<LabeledProgressBar
								key={id}
								progressLabel={bar.label}
								done={bar.done}
							/>
						))}
					</Box>
				</ProgressBarGroup>
			))}
		</>
	)
}

App.propTypes = {}

App.defaultProps = {}

export default App