message: prevent navigation with unsaved code
diff: import React, { useState, useEffect, useRef } from "react";
  import { Controller } from "react-hook-form";
  import { IFieldProps } from "../utils";
  -
  +import { Prompt } from "react-router-dom";
  import AceEditor from "react-ace";
  import "ace-builds/src-noconflict/mode-javascript";
  import "ace-builds/src-noconflict/theme-github";
  @@ -92,6 +92,13 @@ function ControlledCode({ onChange, onBlur, value }: IControlledCodeProps) {
  </div>
  {!autoSave && value !== localValue && (
  + <>
  + <Prompt
  + when={true}
  + message={(location) =>
  + `You have some unsaved code changes, Are you sure you want to discard and continue?`
  + }
  + />
  <Button
  onClick={() => onChange(localValue)}
  className={classes.saveButton}
  @@ -99,6 +106,7 @@ function ControlledCode({ onChange, onBlur, value }: IControlledCodeProps) {
  >
  Save Changes
  </Button>
  + </>
  )}
  </>
  );
  