Display an element when input value is empty and hide it when input value is not empty

I made an input with a paragraph position absolute to the input element.

I just want to hide the element when the input value is not empty and display it when the input value is empty.

This is the code I wrote but it’s not working. What should I do please. Thanks.

var x = document.getElementById("searchBtn").value;

document.getElementById("searchBtn").addEventListener("focus", myFunction3);

function myFunction3() {
  if (x == "") {
    document.querySelector(".mypara").style.visibility = "visible";
  } else {
    document.querySelector(".mypara").style.visibility = "hidden";
  }

}

<input id="searchBtn">
<div class="mypara">mypara</div>