Having trouble using howler

The music plays and then does not pause. Also, when I play the music instead of playing from start it plays double. Here is the screenshot of the page

below I am attaching the code, please can someone help me use howler correctly?

p.s ignore the backend code get request

import React, { useState } from "react";
import "./LikedSongs.css";
import Sidebar from "./Sidebar";
import { useEffect } from "react";
import axios from "axios";
import { Howl } from "howler";

function Song(props) {
  function handleSong(e) {
    e.preventDefault();
    props.handleSongClick(props.song);
  }

  return (
    <div>
      <li className="songItem" onClick={handleSong}>
        <span>{props.song.count}</span>
        <h5>
          {props.song.songname}
          <div className="subtitle">{props.song.artistname}</div>
        </h5>
        <div className="album">{props.song.Albumname}</div>
      </li>
    </div>
  );
}

const initialValueOfSongs = [
  {
    songname: "On my way",
    artistname: "Alan Walker",
    Albumname: "On my way",
    songlink:
      "https://dl.dropboxusercontent.com/s/rfz0s49idtk3rhl/Canon%20In%20D.mp3?dl=0",
  },
  {
    songname: "Aitebar",
    artistname: "Abdullah Qureshi",
    Albumname: "Aitebar",
  },
  {
    songname: "On my way",
    artistname: "Alan Walker",
    Albumname: "On my way",
  },
  {
    songname: "On my way",
    artistname: "Alan Walker",
    Albumname: "On my way",
  },
  {
    songname: "On my way",
    artistname: "Alan Walker",
    Albumname: "On my way",
  },
];

export default function LikedSongs() {
  const [selectedSong, setSelectedSong] = useState(initialValueOfSongs[0]);
  const [songs, setSongs] = useState(initialValueOfSongs);
  const [play, setPlay] = useState(require("./playbutton.png"));
  
  var src = selectedSong.songlink;
  var sound = new Howl({
    src,
    html5: true,
    preload: true,
    loop: true,
  });
  
  useEffect(() => {
    fetchdata();
  }, []);

  const callMySound = () => {
    sound.play();
    setPlay(require("./pause.png"));
  };

  const handleplay= ()=>{
    if(play===require("./pause.png")){
      sound.pause()
      setPlay(require("./playbutton.png"))
    }
    else{
      sound.play()
      setPlay(require("./pause.png"))
    }
  }

  async function fetchdata() {
    const response = await axios.get("http://localhost:5000/songs");
    const songs = response.data;
    var count = 1;
    songs.forEach((song) => {
      song["count"] = count;
      count++;
    });
    setSongs(songs);
  }

  const handleSongClick = (song) => {
    setSelectedSong(song);
    callMySound();
    console.log(sound);
  };

  return (
    <div className="songsbody">
      <Sidebar />
      <div className="listsongs">
        <li className="songItem top">
          <span>#</span>
          <h5>Song name</h5>
          <div className="album">Album name</div>
        </li>
        {songs &&
          songs.map((song) => (
            <Song
              key={song.count}
              song={song}
              handleSongClick={handleSongClick}
            />
          ))}
      </div>
      <div className="footer">
        <div className="footer_left">
          <img
            className="footer_albumLogo"
            src="https://i1.sndcdn.com/artworks-aHWeKTP05eBf-0-t500x500.jpg"
            alt=""
          />

          <div className="footer_songInfo">
            <h6>{selectedSong.songname}</h6>
            <p>{selectedSong.artistname}</p>
          </div>
        </div>

        <div className="footer_center">
          <img className="shuffle" src={require("./shuffle.png")} alt="" />
          <img className="back" src={require("./back.png")} alt="" />
          <img className="playbutton" src={play} alt="" onClick={handleplay}/>
          {/* <img className="pause" src={require("./pause.png")} alt=""/> */}
          <img className="next" src={require("./next.png")} alt="" />
          <img className="repeat" src={require("./repeat.png")} alt="" />
        </div>

        <div className="footer_right">
          <img className="volume" src={require("./volume.png")} alt="" />
        </div>
      </div>
    </div>
  );
}

I tried a bunch of functions and methods, making the new howl global etc, but doesnt work correctly. Also, I am new to reactjs, hence may not know the correct way to do this.