nextjs conditional jsx not re-rendering

Up in my component I have:

 let isClicked = false;

Down where things are rendered I have:

<div className="relative">
   {!isClicked ? (
    <div className="relative">
       1
    </div>
    ) : (
    <div className="relative">
       2
    </div>
    )
   }
</div>

The issue is nothing changes when the variable changes.
I can ensure the variable changes on the command line.
And the logic works if I change it and manually reload the page.

The issue is it won’t re-render when the variables changes during the run time.

>Solution :

There are special variables in react that cause rerender on their change. These are state variables. Imagine the problem you will face if every variable change causes a rerender.

If this is a functional component you can make use of useState:

const [isClicked,setIsClicked] = useState(false);
.
.
//some method triggered by button click etc.
const onclick =() => {
setIsClicked(true);
}
.
.

Read : Link and Link