Google Apps Script: I want to display Script Property in the client-side code, but its value is undefined

Question

I'm opening a dialog box, where I want to amend the code based on the boolean condition.

<div>
   <p>Choose the destination folder:</p>
   <div id="folder-buttons" class="folder-buttons">
     <button onclick="google.script.run.createSourceFolder()" >Create new folder</button>
     <be>
     <button onclick="getOAuthToken()">Select existing folder</button><be>
   </div>
<div id="folder-delete" class="folder-delete">
 <!--Bar with the folder info is inserted here-->

</div>

function pasteCode() {

var url = 'google.com';
var name = 'folder-name';

let x = "<a style=\"flex-grow: 9\" id=\"folder-name\">No folder selected</a>";
let y = " <a style=\"flex-grow: 9\" id=\"folder-name\" href='" + url + "' target=\"_blank\">" + name + "</a>\n" + "<button  onclick=\"deleteFolder()\">Remove</button>";

var i = google.script.run.getVis();
console.log(i); // in console it display 'undefined', instead of returning the script property.

if (i == true) {
    document.getElementById("folder-delete").innerHTML = y;
  } else {
  document.getElementById("folder-delete").innerHTML = x;
}
}

pasteCode()

Server-side code is below:

function getVis() {
  var vis = ps.getProperty('MENU_VISIBILITY');
  return vis;
}

Property 'MENU VISIBILITY' is set as true.