Type mismatch: ResponsiveBar=> label

[HirajGajera007]

For the ResponsiveBar: label is not accepting a component.

<ResponsiveBar
    data={barData}
    label={({ value }: { value: number | null }) => {
                            if (value) return <tspan y={-10}>{`${value.toLocaleString()} km`}</tspan>;
                            else return <tspan y={-10}>{'0 km'}</tspan>;
                        }} />

Error:

[plouc]

It's not a type mismatch, label should return a string, as it's also used for the canvas implementation, which cannot render JSX.