How to format the code on click of a button in @monaco-editor/react

how to format the code inside the monaco editor when user clicks the show code button? I have tried formatOnPaste: true but it seems not working when you update the code programmatically (using useState)

here is the demo (make sure to click show code button)

import Editor from "@monaco-editor/react";
import { useState } from "react";


export default function App() {
  const [code, setCode] = useState("");

  const handleShowCodeClick = () => {
    const newCode = "const consoleText = (text) => {console.log(text)}";
    setCode(newCode);
  };
  
  return (
    <div>
      <Editor
        value={code}
        height="500px"
        theme="vs-dark"
        options={{
          formatOnPase: true
        }}
        language="javascript"
        onChange={(newCode) => setCode(newCode as string)}
      />
      <button onClick={handleShowCodeClick}>Show code</button>
    </div>
  );
}

the actual result:

const consoleText = (text) => {console.log(text)}

the expected result:

const consoleText = (text) => {
  console.log(text)
}