Like Button Using Toggleicon Doesn't work for clicks more than twice

Hi,

I create a simple like button using Toggleicon utilizing page state. Toggleicon value is set to a page state called "isLiked" with boolean type, and default value 'false'.

In actions Tab, I simply created if 'isLiked' is true, then 'create document', and if false then 'delete document' as seen below:

Also On Page load, I created query to check whether the document exists in database, if exists then 'isLiked' value is true.

Those configuration indeed works but only for twice. I mean like this:

1st Click : When a user click like toggleicon -> turns to red (backend: create document)
2nd Click: When a user click again -> turns to grey (backend: delete document)
3rd Click: when a user click again -> turns to red again (backend: create document)
4th Click: When a user click again -> turns to grey again (but this time the document is not deleted)

if I keep trying to click:

5th Click: a user click again -> turns to red (create document)
6th Click: a user click again -> turns to grey (document not deleted)

and so on...

But If I click 'Navigate Back' on the page, and I navigate to this page, then I click the 7th click which turn from red to grey -> the document deleted successfully!

How to create:
Everytime a button change to red -> create
Everythime a button change to grey -> delete

please help... I am a newbie btw. Thank you