I wanted to display inside span tag with id ‘demo’ the current time but unfortunately my code doesn’t work as expected. Please help me.

<!-- My HTML -->
<div class="modal fade" id="station-details" tabindex="-1" aria labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
    <div class="modal-body">
    <p>Heure locale : <strong><span id="demo"></span></strong></p>
</div></div></div></div>

// My script
<script>
$(document).ready(() => {
    function updateCurrentTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        // Format the time as HH:MM:SS
        var formattedTime = hours + ':' + minutes + ':' + seconds;
        return formattedTime;
    }
    
    
    
    // Update current time when modal is shown
    $(window).on('shown.bs.modal', function () {
        console.log(updateCurrentTime());
        let currentTimeElement = document.getElementById('demo');
        currentTimeElement.textContent = updateCurrentTime();
    });
    
    });

</script>