[Solved]-React useState throws error on Highcharts mouseOver-Highcharts

The data isn't probably available immediately that's why it's returning a null data. However, you can set the data asynchronously using a setTimeout delay like so.

const [price, setPrice] = useState<number>(0)

options = {
  ...
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(e:any) {
            price = // logic to fetch price based on mouse position 
            console.log(price)   
            setTimeout(() => { // This is where the delay comes in
            setPrice(price)
            }, 0)
          }
        }
      }    
    }
  }
}