react-native-svg-chart Yaxis points goig out of range - react-native

Question

*Y-axis labels are reformatted value/60 *
Y-axis Max point is at 170 which is going out of graph.
Graph height is not adjusting according to the highest point of the Y-axis value.Also plotted graph for values going upto 200 above which is plotted correctly in range.
<View
style={{
height: 250,
paddingVertical: 10,
flexDirection: 'row',
}}>
<YAxis
data={props.data}
yAccessor={({item}) => item?.sleep_n1_time}
style={{marginBottom: xAxisHeight, width: 40, marginRight: 5}}
contentInset={verticalContentInset}
svg={axesSvg}
formatLabel={(value, idx) => {
if (props.data.length > 50) {
return idx % 5 === 0 ? formatTime(value) : '';
} else if (props.data.length > 20) {
return idx % 2 === 0 ? formatTime(value) : '';
} else {
return formatTime(value);
}
}}
/>
<View style={{flex: 1, marginRight: 10}}>
<StackedAreaChart
style={{height: 200, paddingVertical: 16}}
data={props.data}
keys={keys}
contentInset={{...horizontalContentInset, ...verticalContentInset}}
colors={colors}
curve={shape.curveNatural}
showGrid={false}
/>
<XAxis
style={{height: xAxisHeight}}
data={props.data}
formatLabel={(value, index) => {
if (props.data.length > 50) {
return index % 5 === 0 ? props.data[index]?.time : '';
} else if (props.data.length > 20) {
return index % 2 === 0 ? props.data[index]?.time : '';
} else {
return props.data[index]?.time;
}
}}
contentInset={horizontalContentInset}
svg={axesXSvg}
/>
</View>
</View>