Stepper error

[gmc1972]

Message:
Hello
I'm trying to get the stepper working but no way, the buttons next our previous doesn't work
I have installed trouhgt CDN and i'm getting
test.php:72 Uncaught TypeError: stepper.navigate is not a function
at HTMLButtonElement.onclick (test.php:72:130)

this line

Previous

My html code

01

Basic Information

02

Personal Data

03

Terms and Conditions

04

Finish

Step 1

Username

Email

Password

Confirm Password

Next

Step 2

First Name

Last Name

Phone Number

Address

Country

                        <div class="d-flex w-100 align-items-center justify-content-between">
                            <button class="btn btn-dark btn-block mb-3 mt-5" onclick="Stepper('1')">
                                Previous
                            </button>
                            <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                                Next
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="3">
        <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9;">
            <div class="my-0 mx-auto" style="max-width: 500px;  border-radius: 10px; background: #f5f5f5;">
                <div class="p-10 d-flex flex-col justify-content-center align-items-center">
                    <div class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold" style="fontSize: 30px; color: #939393">
                        Step 3
                    </div>
                    <div class="p-10 d-flex flex-col justify-content-center align-items-center w-100">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
                            molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis
                            assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
                        </p>
                        <p>
                            Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                            recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                            quos facere sequi unde optio aliquam!
                        </p>
                        <p>
                            Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                            recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                            quos facere sequi unde optio aliquam!
                        </p>
                        <p>
                            Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                            recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                            quos facere sequi unde optio aliquam!
                        </p>
                    </div>
                    <div class="d-flex w-100 align-items-center justify-content-between">
                        <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('2')">
                            Previous
                        </button>
                        <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('4')">
                            Next
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="stepper-content fade-in" stepper-label="4">
    <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9;">
        <div class="my-0 mx-auto" style="max-width: 500px;  border-radius: 10px; background: #f5f5f5;">
            <div class="p-10 d-flex flex-col justify-content-center align-items-center">
                <div class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold" style="fontSize: 30px; color: #939393">
                    Step 4
                </div>
                <div class="p-10 d-flex flex-col justify-content-center align-items-center w-100">
                    <div class="text-center" style={{ fontSize: '25px', textAlign: 'center' }}>
                    Congratulations! You have completed this process.
                    <span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
                    🎉
                    </span>
                </div>
                <div class="d-flex w-100 align-items-center justify-content-between">
                    <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                        Previous
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script> <script> const stepper = document.querySelector('#stepper'); new CDB.Stepper(stepper); </script>