TypeError when using Popper with Bootstrap 4

Question

I am trying to use Popper.js with Bootstrap 4 to show an info box on hover over an icon from font awesome but I get the following TypeError when I hover it:

Uncaught TypeError: n is not a constructor
    at i.show (tooltip.js:284:22)
    at i._enter (tooltip.js:587:15)
    at HTMLElement.<anonymous> (tooltip.js:522:62)
    at HTMLElement.handle (jquery-3.5.1.slim.min.js:2:46440)
    at HTMLElement.dispatch (jquery-3.5.1.slim.min.js:2:42868)
    at v.handle (jquery-3.5.1.slim.min.js:2:40852)

I tried to shuffle the order in which libraries are imported but that doesn't make a difference. I would appreciate some help from anyone who can help me fix this. I expect a pop over to show up when I over the info icon but it doesn't and actually runs into a TypeError.

Code Snippet

$(function() {
  $('[data-toggle="popover"]').popover({
    trigger: 'hover click'
  });
});

<div class="container">
  <div class="form-group">
    <label for="discord_tag">Discord Tag</label>
    <i class="fas fa-info-circle info-icon" data-toggle="popover" data-content="Your Discord ID with @, for example, @mrsheep1647"></i>
  </div>
</div>


<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>