my popup is being hidden

const Server = () => {
  return (
    <div className="relative mb-2 h-[48px] w-[48px]">
      <div className="avatar">
        <div className="rounded-md object-contain">
          <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </div>
/* the popup*/
      <div className="absolute left-1/2 z-50 bg-black">Server Name</div>
    </div>
  );
};

const Server = () => {
  return (
    <div className="relative mb-2 h-[48px] w-[48px]">
      <div className="avatar">
        <div className="rounded-md object-contain">
          <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </div>
/* the popup*/
      <div className="absolute left-1/2 z-50 bg-black">Server Name</div>
    </div>
  );
};

import Server from "./Server";

const Servers = () => {
  return (
    <div className="flex-1 overflow-y-scroll scrollbar-none">
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
    </div>
  );
};

export default Servers;

import Server from "./Server";

const Servers = () => {
  return (
    <div className="flex-1 overflow-y-scroll scrollbar-none">
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
    </div>
  );
};

export default Servers;