checkbox state always turn true when false in localStorage

For some reason, when loading the page, the checkbox checked state is always true and when it's supposed to be set to the actual storage value false

if (localStorage.getItem("diff_search") == undefined) {
        localStorage.setItem("diff_search", false)
}

document.getElementById("diff_search_box").checked = localStorage.getItem("diff_search")
// localStorage.getItem("diff_search") = false
// document.getElementById("diff_search_box").checked become true for no reason here

document.getElementById("diff_search_box").addEventListener("change", function() {
   if (this.checked){
       localStorage.setItem("diff_search", true)
   } else {
       localStorage.setItem("diff_search", false)
   }
});

The problem is not about storing the value, but actually setting the state of the checkbox.

I also Know that localStorage can store Boolean, contrary to what some comment say, after all, localStorage is (i oculd be wrong here) a json file i can get value from using keys.