DOMException on calling navigator.clipboard.readText() when implementing Clipboard button

I'm trying to implement a copy to clipboard button but keep on getting this error. I have the below code in my ruby on rails app.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="copy"
export default class extends Controller {
  static targets = ["text", "button"]
  connect() {
  }
  copyText() {
    // Copy the text inside the text field
    navigator.clipboard.writeText(clippy_button.href).then(function(x) {
      alert("Link copied to clipboard: " + clippy_button.href);
    });
  }
}

div data-controller="copy" class="p-4 mb-4 mt-4 border rounded chat-hint-box">
  <%= turbo_stream_from "channel_#{@uuid}" %>
  <div data-copy-target="text" id="ai_output">
    <%= render partial: "ai/output", locals: { generated_idea: "" } %>
  </div>