JSFiddle getting colour of pixel in a canvas always returning 000 for rgb values

Question

I have found/tried many solutions on stackoverflow & other resources, but I still cannot correctly read the colour of the pixel value my mouse is hovering over.

I created a JSFiddle where a rectangle is drawn on the canvas, and the canvas background is set to blue.

I have an onMouseMove event that will fire every time the mouse moves. The purpose of this function is to get the x and y coordinates of the mouse, and use those coordinates to get the colour of the pixel in that location.

Here is a link to the JSFiddle: https://jsfiddle.net/michael_t/z71g6vcn/134/

This is the js file:

class Canvas extends React.Component {
  constructor(props) {
    super(props);

    this.state = { x: 0, y: 0 };
  }

  componentDidMount() {
    const canvas = this.refs.canvas
    const ctx = canvas.getContext("2d")

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }

  _onMouseMove(e) {
    this.setState({ x: e.screenX, y: e.screenY });
    console.log("x: " + this.state.x + " y: " + this.state.y);

    var canvas = this.refs.canvas;
    var ctx = canvas.getContext("2d");
    var data = ctx.getImageData(this.state.x, this.state.y, 1, 1).data;
    console.log(data);
  }

  render() {
    return(
      <div >
        <canvas onMouseMove={this._onMouseMove.bind(this)} ref="canvas" width={640} height={425} />
      </div>
    )
  }
}

ReactDOM.render(<Canvas />, document.querySelector("#app"))

HTML file:

<div id="app"></div>

CSS:

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

/* #example {
  background-color: blue;
} */

canvas {
  background-color: blue;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

The data variable is holding the RGB values of the pixel at the calculated location. For some reason, the RGB value is always 000 despite the fact that I'm moving my mouse over the blue background. The x & y coordinates are updating properly though, so I'm not sure if it's an issue with the getImageData function or what it could be.

How do I correctly read the pixel values where my mouse is?