DesignOverlay.jsx

import { Component } from 'react'
class OverlayDesign extends Component {
  state = {
    hide: true,
  }
  listener = event => {
    if (event.keyCode === 74) {
      this.setState({ hide: !this.state.hide })
    }
  }

  componentDidMount() {
    window.addEventListener('keydown', this.listener)
  }

  componentWillUnmount() {
    window.removeEventListener('keydown', this.listener)
  }
  render() {
    return (
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 99999999,
          display: this.state.hide ? 'none' : 'block',
          objectFit: 'cover',
        }}
      >
        <img
          style={{ width: '100%' }}
          src={this.props.src}
          alt={this.props.src}
        />
      </div>
    )
  }
}
export default OverlayDesign