React aces show syntax errors

Question

I'm trying to figure out how to get javascript syntax validation in myreact-ace editor.

But the docs don't seem to cover how to do this?

I though that the onValidation() prop would provide a list of errors whenever the editor updates, but in the below example, nothing happens?

Ultimatley I'd like to get an effect similar to error highlighting in Code Sandbox, with red lines under the incorrect code:

Code Sandbox

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";

import "./styles.css";
import "./prism.css";

const jsSample = `function add(a, b) {
  BIGERRORHERE
  return a + b;
}
`;

function App() {
  const [jsSampleText, setJsSampleText] = useState(jsSample);

  return (
    <div>
      <h3>JavaScript</h3>
      <Editor
        className="box"
        value={jsSampleText}
        onValueChange={(jsSample) => setJsSampleText(jsSample)}
        highlight={(jsSample) => highlight(jsSample, languages.js)}
        padding={10}
        onValidate={(annotations) => {
          console.log(annotations);
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);