I'm trying to open in a new tab a URL retrieved from an API. It's basically a shortened URL. But when I try to add it to the href attribute of my , it returns me something like:

localhost:3000/[the correct shortened url]

or if I'm deploying the website:

[my website url]/[the correct shortened url]

Here's my component, where the link is the one with the "shortened-url" className:

import { React, useState } from "react";
import "../styles/ModalUrl.scss";
import CloseIcon from "@mui/icons-material/Close";

const ModalUrl = ({ modalClass, setModalClass, shortenedUrl }) => {
  const closeModal = () => {
    setModalClass("hidden");
  };

  return (
    <div className="modal-and-background">
      <div className={`dark-background ${modalClass}`}></div>
      <div className={`modal-url ${modalClass}`}>
        <h1>Your URL is ready!</h1>
        <a href={shortenedUrl} className="shortened-url">
          {shortenedUrl}
        </a>
        <div className="button-container">
          <button className="btn-close" onClick={closeModal}>
            CLOSE
            <CloseIcon className="close-icon" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default ModalUrl;

Thank you!