jQuery UI Autocomplete display while using Bootstrap 5

I have a form wrapped in Bootstrap 5 that I'm trying to apply jQuery Autocomplete to.

I've written my jQuery and PHP successfully and it works exactly how I want to it when it's on a basic form with no CSS. However, when I try to apply the working code (with adjustments as necessary) the autocomplete drop-down menu does not appear.

I've seen the post here: (stackoverflow post) Style jQuery autocomplete in a Bootstrap input field

And I've also reviewed the jQuery Autcomplete API Documentation here

Below you'll find the code without any attempt at custom CSS in order to avoid confusion.

Excerpt of the form

        <div class="row pt-2">
        <div class="col ms-0 ps-0">
        <h4 class="mt-2">Buyer's Information</h4>
        <hr>
            <div class="row ps-2 pb-2">
                <div class="col pe-2 ps-0">
                    <div class="form-floating mb-0">
                        <input type="text" class="form-control" name="buyerFirstName ui-autocomplete" id="buyerFirstName" placeholder="Buyer #1 First Name">
                        <label for="buyerFirstName">Buyer #1 First Name</label>
                    </div>
                   

I've also tried adding a div element below the input for the drop-down with no success.

Style and Script tags I'm including:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/color/jquery.color-2.2.0.js" integrity="sha256-gvMJWDHjgDrVSiN6eBI9h7dRfQmsTTsGU/eTT8vpzNg=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js" integrity="sha512-6Jym48dWwVjfmvB0Hu3/4jn4TODd6uvkxdi9GNbBHwZ4nGcRxJUCaTkL3pVY6XUQABqFo3T58EMXFQztbjvAFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js" integrity="sha512-TToQDr91fBeG4RE5RjMl/tqNAo35hSRR4cbIFasiV2AAMQ6yKXXYhdSdEpUcRE6bqsTiB+FPLPls4ZAFMoK5WA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>

<script src="js/main.js"></script>

<link rel="stylesheet" type="text/css" href="../public/css/style.css"/>

jQuery code for the Autocomplete:

$(document).ready(function(){
    $('#buyerFirstName').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: './autocomplete.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    search: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            $('#buyerFirstName').val(ui.item.label);
            $('#buyerLastName').val(ui.item.value);
            $('#buyerCellPhone').val(ui.item.phone1);
            $('#buyerEmail').val(ui.item.email1);
        }
    });
});

And finally the PHP code:

<?php 

try {
    require '../config.php';
    $connection = new PDO($dsn, $username, $password, $options);

    $inputQuery = $_POST['search'];

    $sql = 'SELECT * FROM buyers WHERE firstName LIKE :firstName';
    $statement = $connection->prepare($sql);
    $statement->execute(['firstName' => '%' . $inputQuery . '%']);

    $result = $statement->fetchAll();

    foreach ($result as $row) {
        $response[] = array(
            'value' => $row['firstName'],
            'label' => $row['firstName'] . ' ' . $row['lastName'],
            'lastName' => $row['lastName'],
            'phone1' => $row['phone1'], 
            'email1' => $row['email1'],
        );
    }

    echo json_encode($response); 

} catch (\PDOException $error) {
    throw new \PDOException($error->getMessage(), (int)$error->getCode());
}

?>

Again, this code all works great when I'm in a test server with no CSS interfering and my main issue is that I'm not getting a dropdown with the autocomplete.

Does anyone have any ideas on how I can get this to function properly?