Area chart is shown wrongly, area is not being covered completely

const ChartComponent = () => {   
     const firstSeries =    [
		{
			date: '2021-03-29T00:00:00+00:00',
			score: 573
		},
		{
			date: '2021-04-05T00:00:00+00:00',
			score: 630
		},
		{
			date: '2021-04-12T00:00:00+00:00',
			score: 643
		},
		{
			date: '2021-04-19T00:00:00+00:00',
			score: 589
		},
		{
			date: '2021-04-26T00:00:00+00:00',
			score: 589
		},
		{
			date: '2021-05-10T00:00:00+00:00',
			score: 544.25
		}]  
                const data = firstSeries.map(s => Math.round(s.score));
	        const labels = firstSeries.map(s =>s.date);

                return( <Chart>
				<ChartArea height={441} />
				<ChartCategoryAxis>
					<ChartCategoryAxisItem
						majorGridLines={{ visible: false }}
						justified={true}
						categories={labels}
						labels={{ rotation: 'auto' }}
						type="date"
					/>
				</ChartCategoryAxis>
				<ChartValueAxis>
					<ChartValueAxisItem
						min={Math.round(Math.min(...data) / 10) * 10}
						majorGridLines={{
							visible: false
						}}
						title={{
							text: 'Scaled Score'
						}}
					/>
				</ChartValueAxis>
				<ChartSeries>
					<ChartSeriesItem
						type="line"
						data={data}
						markers={{
							visible: true,
							type: 'circle'
						}}
						color="rgb(0 143 204)"
					/>
					<ChartSeriesItem type="area" data={data} color="rgb(214 237 247)" />
				</ChartSeries>
                        </Chart>
      )
}