How to use the @nivo/core.getRelativeCursor function in @nivo/core

handleClick = event => {
        const { isInteractive, nodes, margin, onClick } = this.props

        if (!isInteractive) return

        const [x, y] = getRelativeCursor(this.surface, event)

        const node = findNodeUnderCursor(nodes, margin, x, y)
        if (node !== undefined) onClick(node, event)
    }

const getFeatureFromMouseEvent = (event, el, features, projection) => {
    const [x, y] = getRelativeCursor(el, event)

    return features.find(f => geoContains(f, projection.invert([x, y])))
}

event => {
                const [x, y] = getRelativeCursor(canvasEl.current, event)
                if (!isCursorInRect(margin.left, margin.top, innerWidth, innerHeight, x, y))
                    return null

                const nodeIndex = delaunay.find(x - margin.left, y - margin.top)
                return nodes[nodeIndex]
            },
            [canvasEl, margin, innerWidth, innerHeight, delaunay]

event => {
            const [x, y] = getRelativeCursor(canvasEl.current, event)
            if (!isCursorInRect(margin.left, margin.top, innerWidth, innerHeight, x, y)) return null

            const nodeIndex = delaunay.find(x - margin.left, y - margin.top)
            return nodes[nodeIndex]
        },
        [canvasEl, margin, innerWidth, innerHeight, delaunay]

event => {
            const [x, y] = getRelativeCursor(elementRef.current, event)
            const index = delaunay.find(x, y)

            return [index, index !== undefined ? nodes[index] : null]
        },
        [delaunay]

handleMouseHover = (showTooltip, hideTooltip) => event => {
        const {
            isInteractive,
            margin,
            theme,
            cells,
            cellSize,
            origin,
            tooltipFormat,
            tooltip,
        } = this.props

        if (!isInteractive || !cells) return

        const [x, y] = getRelativeCursor(this.surface, event)
        const cell = findCellUnderCursor(cells, cellSize, origin, margin, x, y)

        if (cell !== undefined && cell.data) {
            showTooltip(
                ,
                event
            )

getArcFromMouse = event => {
        const [x, y] = getRelativeCursor(this.surface, event)
        const { centerX, centerY, margin, radius, innerRadius, arcs } = this.props

        return getHoveredArc(
            margin.left + centerX,
            margin.top + centerY,
            radius,
            innerRadius,
            arcs,
            x,
            y
        )
    }

handleMouseHover = (showTooltip, hideTooltip, event) => {
        if (!this.nodes) return

        const [x, y] = getRelativeCursor(this.surface, event)

        const { margin, offsetX, offsetY, theme, setCurrentNode, tooltip } = this.props
        const node = this.nodes.find(node =>
            isCursorInRect(
                node.x + margin.left + offsetX - node.width / 2,
                node.y + margin.top + offsetY - node.height / 2,
                node.width,
                node.height,
                x,
                y
            )
        )

        if (node !== undefined) {
            setCurrentNode(node)
            showTooltip(, event)

handleClick = event => {
        const { isInteractive, nodes, margin, onClick } = this.props

        if (!isInteractive) return

        const [x, y] = getRelativeCursor(this.surface, event)

        const node = findNodeUnderCursor(nodes, margin, x, y)
        if (node !== undefined) onClick(node, event)
    }

const getFeatureFromMouseEvent = (event, el, features, projection) => {
    const [x, y] = getRelativeCursor(el, event)

    return features.find(f => geoContains(f, projection.invert([x, y])))
}