example.jsx

import { useEffect, useState } from "react";

export default function Piano() {
  const [key, setKey] = useState(null);

  useEffect(() => {
    function onKeyPress(e) {
      e.preventDefault();
      const key = e.key.toLowerCase();

      setKey(key);
    }

    window.addEventListener('keyDown', onKeyPress);

    return () => {
      window.removeEventListener('keyDown', onKeyPress);
    }
  }, [])

  return <Component keys={key} />
}