I want to change the string displayed as $0 to Free in WooCommerce.

My website structure is as follows:

<div class="wc-block-components-radio-control__description-group">
   <span id="radio-control-0-free_shipping:2__description" class="wc-block-components-radio-control__description">
     <span class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount">$0</span>

So, I applied the following code using the JS path of the Chrome Developer Tools.

<script>
let text = document.querySelector("#radio-control-0-free_shipping\\:2__description > span").innerHTML;
document.querySelector("#radio-control-0-free_shipping\\:2__description > span").innerHTML = text.replace("$0", "Free !");
</script>

But this doesn't work.

So I re-applied the code below by changing the querySelector, but it doesn't work.

<script>
let text = document.querySelector(".wc-block-formatted-money-amount.wc-block-components-formatted-money-amount
").innerHTML;
document.querySelector(".wc-block-formatted-money-amount.wc-block-components-formatted-money-amount
").innerHTML = text.replace("$0", "Free !");
</script>

It occur Uncaught TypeError: Cannot read properties of null (reading 'innerHTML') error.

I've tried this code in different cases, and it worked. But I don't know why it doesn't work on the cart page in WooCommerce.

Can someone give me advice on what parts I need to fix?