Create SparkLines with X and Y point

[totosugito]

Hi,
I am try to create sparklines with x and y data. The code is like this

`
import React, { useState } from 'react';
import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';

const MyComponent1 = () => {
const [tooltip, setTooltip] = useState(null);
const data = [5, 10, 5, 20, 12, 15, 18];

const handleSpotHover = (spotData) => {
    setTooltip(spotData);
};

const handleSpotLeave = () => {
    setTooltip(null);
};

return (
    <div>
        <Sparklines data={data} width={100} height={20}>
            <SparklinesLine color="blue" />
            <SparklinesSpots
                size={2}
                onMouseOver={handleSpotHover}
                onMouseLeave={handleSpotLeave}
            />
        </Sparklines>
        {tooltip && (
            <div style={{ position: 'relative', top: tooltip.y, left: tooltip.x }}>
                <div>Value: {tooltip.y}</div>
            </div>
        )}
    </div>
);

};
export default MyComponent1
`

But, when I running the code. I get this error message
react-dom.development.js:86 Warning: Received NaN for the cy attribute. If this is expected, cast the value to a string. at circle at g at SparklinesLine (http://localhost:3000/static/js/bundle.js:35400:11) at svg at Sparklines (http://localhost:3000/static/js/bundle.js:34569:11) at div at MyComponent2 at div at div at App printWarning @ react-dom.development.js:86 error @ react-dom.development.js:60 validateProperty$1 @ react-dom.development.js:3736 warnUnknownProperties @ react-dom.development.js:3803 validateProperties$2 @ react-dom.development.js:3827 validatePropertiesInDevelopment @ react-dom.development.js:9541 setInitialProperties @ react-dom.development.js:9830 finalizeInitialChildren @ react-dom.development.js:10950 completeWork @ react-dom.development.js:22193 completeUnitOfWork @ react-dom.development.js:26596 performUnitOfWork @ react-dom.development.js:26568 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performConcurrentWorkOnRoot @ react-dom.development.js:25738 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 7Error: <circle> attribute cy: Expected length, "NaN".

Do you have sample working code to plot sparklines with x and y data?
Thank you