I want my scrollbar to change color when i hover that scrollbar

Question

#custom-scrollbar {
  overflow-y: scroll;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.5s ease;
}

#custom-scrollbar:hover::-webkit-scrollbar {
  width: 12px;
}

#custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(81, 81, 81, 0.5);
}

#custom-scrollbar:hover {
  scrollbar-color: rgba(81, 81, 81, 0.5) transparent;
}

#custom-scrollbar::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: white;
}

This is my css for scrollbar . Basically when I hover my dev container my scrollbar appears ....transparent to gray....

But when I hover my scrollbar thumb I want it to become white which is not working I don't know why .Please anyone help me with that.

<div className={"flex flex-col w-full h-full"} id="custom-scrollbar">
      {Loading && (
        <div className="absolute top-0 left-0 z-[99999] h-[100vh] w-full bg-black bg-opacity-70">
          <PulseLoader color="#1db954" cssOverride={override} />
        </div>
      )}
      {canEdit && toggleEdit && (
        <CreatePlaylistModal
          playListData={playListData}
          setToggleEdit={setToggleEdit}
          playlistId={playlistId}
          setSaveClicked={setSaveClicked}
          setLoading={setLoading}
        />
      )}
      <div className={`relative flex gap-4 p-6 ${color}`}>
        <div className=" relative w-[250px] h-[250px] flex justify-center items-center bg-lightgray rounded-md shadow-primary-shadow overflow-hidden">
          {thumbnail == "" ? (
            <FiMusic className="w-12 h-12 text-gray-400" />
          ) : (
            <img
              className="absolute top-0 left-0 w-full h-full"
              src={thumbnail}
              alt=""
            />
          )}
        </div>
        <div className="flex flex-col justify-end flex-1">
          <h2 className="text-sm font-bold cursor-default">Playlist</h2>
          <h1
            className="text-[6rem] font-bold cursor-default"
            onClick={() => {
              setToggleEdit(true);
            }}
          >
            {playListData.name}
            {/* Name */}
          </h1>
          <h2 className="pl-1 font-semibold cursor-default hover:underline">
            {playListData ? playListData.owner.name : ""}
          </h2>
        </div>
      </div>
      <div className="flex flex-col">
        <div className="relative">
          <div className="mx-6 text-[2.5rem] flex items-center border-lightgray border-b-[0.5px]">
            <span
              onClick={() => {
                setToggleOptions((prev) => !prev);
              }}
              className="p-4 pl-0 cursor-pointer text-primarytext hover:text-white"
            >
              ...
            </span>
          </div>
          <div
            className={`${
              toggleOptions ? "" : "hidden"
            } absolute top-18 left-4  rounded-md z-[99999] flex bg-spotifybg shadow-primary-shadow`}
          >
            <ul className="flex flex-col p-2 font-semibold child:flex child:gap-x-2 child:items-center hover:child:bg-lightgray child:px-4 child:py-2 child:text-sm child:cursor-default">
              {canEdit && (
                <li
                  onClick={() => {
                    setToggleEdit(true);
                    setToggleOptions(false);
                  }}
                >
                  <MdOutlineModeEdit className="w-4 h-4" />
                  Edit details
                </li>
              )}
              {canEdit ? (
                playlistType === "private" ? (
                  <li
                    onClick={() => {
                      setTypeofPlaylist("public");
                    }}
                  >
                    <MdPublic className="w-4 h-4" />
                    Set As Public
                  </li>
                ) : (
                  <li
                    onClick={() => {
                      setTypeofPlaylist("private");
                    }}
                  >
                    <MdPublicOff className="w-4 h-4" />
                    Set As Private
                  </li>
                )
              ) : (
                ""
              )}

              {canEdit && (
                <li onClick={deletePlaylist}>
                  <MdDeleteOutline className="w-4 h-4" />
                  Delete Playlist
                </li>
              )}
              <li>
                <MdFavoriteBorder className="w-4 h-4" />
                Add to favourite
              </li>
            </ul>
          </div>
        </div>
        <div className="flex flex-col mx-6 mt-4">
          <div className="flex">
            <h1 className="pb-2 font-bold">Songs</h1>
          </div>
          {playlistSongData.map((item) => {
            return <SingleSongCard key={item._id} info={item} />;
          })}
        </div>
        {canAddSong && (
          <>
            <div className="px-6 py-4">
              <h1 className="mb-4 text-2xl font-bold">
                Let's find something for your playlist
              </h1>
              <div className="relative w-1/3">
                <IoSearch className="absolute w-5 h-5 text-gray-400 top-3 left-2" />
                <input
                  onFocus={() => {
                    setInputFocus(true);
                  }}
                  onBlur={() => {
                    setInputFocus(false);
                  }}
                  value={inputText}
                  onChange={handleInputChange}
                  type="text"
                  placeholder="Search for songs"
                  className="w-full px-8 py-2 text-gray-400 rounded-md outline-none bg-lightgray"
                />
              </div>
            </div>

            <div className="flex flex-col px-6">
              {songData.map((item) => {
                return (
                  <SingleSongCard
                    key={item._id}
                    info={item}
                    add={true}
                    setSongRefresh={setRefresh}
                  />
                );
              })}
            </div>
          </>
        )}
      </div>
    </div>

I tried above css code and also used #custom-scrollbar::webkit-scrollbar:hover property but not working.