hello this code fetches a music queue and the list just displays it, i add new songs to the queue but have to refresh the page for the change to show up, how can I make this happen realtime where it just adds the song without the need to refresh? Thank you

const { data : musicQueued, error: errorMusicQueued } = await supabase
    .from('song_queue')
    .select();


return (
      <div className="p-4">
        <div className="text-lg font-bold mb-2">welcome {user.email}</div>
        <li className="text-xl font-semibold">Music Queued</li>
        <ul className="list-disc list-inside">
          {musicQueued && musicQueued.map((song) => (
            <li key={song.id} className="my-1">{song.song}</li>
          ))}
        </ul>
        <div className="mt-4">
        </div>
      </div>
    );