React - Render Key Press Event - reactjs

Question

I cannot seem to find a fitting example anywhere online. I have little experience with javaScript and React, and my issue might be trivial. The keypress event function works fine if run it by itself. However, if I try to implement it into the class app, and call the function from the render section I get this error: Error message. Any ideas? Thanks in advance. I have added the code.
import React, { Component, useEffect, useState } from 'react';
import './App.css';
import Spotify from 'spotify-web-api-js';
const spotifyWebApi = new Spotify();
class App extends Component {
constructor(){
super();
const params = this.getHashParams();
this.state = {
loggedIn: params.access_token ? true : false,
nowPlaying: {
name: 'Not Checked',
image: '',
device: '',
user_id: '',
playlists: []
}
}
if (params.access_token){
spotifyWebApi.setAccessToken(params.access_token)
}
};
useKeyPress(targetKey) {
const [keyPressed, setKeyPressed] = useState();
// Når du trykker på knappen - sætter vi keyPressed til true for at vise resultatet.
function downHandler({ key }) {
if (key === targetKey) {
this.setKeyPressed(true);
}
}
// Når du releaser knappen - sætter vi keyPressed til false for at fjerne resultatet igen.
const upHandler = ({ key }) => {
if (key === targetKey) {
this.setKeyPressed(false);
}
};
useEffect(() => {
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
// Det er altid "pænt" at ryde op efter sig selv, så vi fjerner eventListeners i return metoden
return () => {
window.removeEventListener('keydown', downHandler);
window.removeEventListener('keyup', upHandler);
};
}, []);
return this.keyPressed;
}
Fapp() {
const aPressed = this.useKeyPress('a');
const sPressed = this.useKeyPress('s');
const dPressed = this.useKeyPress('d');
const fPressed = this.useKeyPress('f');
return (
<div>
{ aPressed ? 'a' : 'not a'}
</div>
);
}
getHashParams() {
var hashParams = {};
var e, r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ( e = r.exec(q)) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}
return hashParams;
}
getNowPlaying(){
spotifyWebApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying: {
name: response.item.name,
image: response.item.album.images[0].url
}
}
)
})
}
handleKeyDown(event) {
if(event.keyCode === 13) {
console.log('Enter key pressed')
}
}
render() {
return (
<div className="App">
<a href='http://localhost:8888'>
<button>Login with Spotify</button>
</a>
<div> Now Playing: { this.state.nowPlaying.name } </div>
<div> user: { this.state.nowPlaying.user_id } </div>
<div>
<img src={ this.state.nowPlaying.image } style={{width: 100}}/>
</div>
<button onClick={() => this.getNowPlaying()}>
Check Now Playing
</button>
</div>
);
};
}
export default App;