this is not real code, but it's pretty similar to what I was trying when I got frustrated with trying to write React hooked up to a non-React lib

pseudo-code.tsx

// external thing that sends/receives MIDI
const box = new Box();

export function MyComponent() {
  const [code, setCode] = useState('');

  useEffect(() => {
    function handleKeyPress(id, key) {
      setState((curr) => curr += key);
    }
    
    async function handleEnterKey(id) {
      // hits an external DB
      // for some reason this was always showing code as an empty string
      const isValid = await checkForValidCode(code);
      
      if (isValid) {
        box.setSuccessOn(id);
      } else {
        box.setFailureOn(id);
      }

      setCode('');
    }
    
    box.onKey(handleKeyPress);
    box.onEnter(handleEnterKey);
  }, []);
  
  // the UI is also subscribed to some other stuff to do with code claim status, etc.
  return (
    <p>{code}</p>
  );
}