Split string and add extra word at onChange in Reactjs

Question

I am trying to show on my page spotify links submitted by users. The problem is the standard Spotify share link is missing the 'embed' in part of the url that is needed to render it so I have been trying to use 'split' to adjust the url to an embed-able one, however I just cannot get it to work? This is the function I am using to split the url and add the extra embed text

function spotify () {
const message = "urlInput";
let split = message.split(".com/");
let joined = split[0]+".com/embed/"+split[1];
}

This is the relevant part of html code I am using to get the users input

{
          currentAccount ? (<textarea 
            placeholder={spotifyLink}
            type="url"
            id="urlInput"
            value={messageValue}
             onChange={e => {setMessageValue(e.target.value); {spotify}}} />) : null
        }

        <button className="waveButton" onClick={music}>
          Submit
        </button>

and the function attached to the button onClick

const music = async () => {
    try {
      const { ethereum } = window;

      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const musicPortalContract = new ethers.Contract(contractAddress, contractABI, signer);

        let count = await musicPortalContract.getTotalSongs();
        console.log("Retrieved total song count...", count.toNumber());
        
        const musicTxn = await musicPortalContract.music(messageValue);

        await musicTxn.wait();

        count = await musicPortalContract.getTotalSongs();
        console.log("Retrieved total song count...", count.toNumber());
      } else {
        console.log("Ethereum object doesn't exist!");
      }
    } catch (error) {
      console.log(error);
    }
  }

I would like to transform the url from this:

https://open.spotify.com/track/3u5N55tHf7hXATSQrjBh2q?si=8fe4896e171e4991

to this:

https://open.spotify.com/embed/track/46q5BtHso0ECuTKeq70ZhW?si=79e6006e92104e51

There might be a better way to do this than using .split but i'm not sure?

EDIT: Adding extra code here that is used for other functions such as getting the array of user inputs, incase it is useful.

 const getAllMusic = async () => {
    try {
      const { ethereum } = window;
      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const musicPortalContract = new ethers.Contract(contractAddress, contractABI, signer);

   
        const music = await musicPortalContract.getAllMusic();
        console.log("lets surf")

       
        let musicArray = [];
        musics.forEach(music => {
          musicArray.push({
            address: music.owner,
            message: music.message
          });
        });

        /* Store our data in React State*/
        setAllMusic(musicArray);
      
      } else {
        console.log("Ethereum object doesn't exist!")
      }
    } catch (error) {
      console.log(error);
    }
  }

and the related html to it

  {allMusics.map((wave, index) => {
          return (
            <div key={index}>
                       
               <div><iframe src={music.message} width="300" height="80"  frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div>