how to cancel change event on conformation in jQuery?

This is Gajarthan, I am new to jQuery. I try to prevent a Check box from being changed if not confirmed by the user. but it's not working when I click the first time. after 2nd click, it's working properly.

this is the summary of my function

when I click the toggle button it needs to show a confirmation alert "Are you sure you want to proceed?" then if I click yes. if toggle inactive it needs to change active. if toggle active it needs to change inactive. and if I click no. toggle won't change!

  $(document).ready(function(){
            $('.toggle-class').change(function() {
                var value =  $(this).prop('checked');
                var proceed = confirm("Are you sure you want to proceed?");
                if (proceed) {
                    console.log(value);
                }
                else{
                    $(this).prop('checked' ,!value);
                }

            })
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">


<input class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" >