may I please know how do I change my mouse cursor to the pointer on mouseover, and back to the default in cytoscape.js and React.js?

Below is my code, which doesn't work. I've removed the parts which aren't relevant to the question

import React, { Fragment, useState } from 'react';
import CytoscapeComponent from 'react-cytoscapejs';
import Cytoscape from 'cytoscape';

const Network = (props) => {

  let [ext_cy, setCy] = useState(null);
  const [my_cursor, setCursor] = useState('default');

          <CytoscapeComponent 
              elements={props.elements} 
              style={ {  
                height: sizeHeight + 'px',
                cursor: my_cursor
              } } 
              cy={cy => {
                cy.on('add', 'node', _evt => {
                    cy.layout(layout).run()
                    cy.fit()
                    setCy(cy)
                })
                cy.on('mouseover', 'node', changeCursor('pointer'));
                cy.on('mouseout', 'node', changeCursor('default'));
              }}
              stylesheet={stylesheet}
              layout={layout} 
              pan={ { x: x, y: 80 } }
              zoom={0.8}
              minZoom={0.5}
              maxZoom={2}
              />