Z-index now working with Overflow property

Question

My React js and tailwind Code

import React from "react";
import { AiFillGift } from "react-icons/ai";
import { IoIosArrowDown } from "react-icons/io";
import { CategoryContainer } from "./style";
// import './categories.css'
export const Categories = () => {
  const subCategories = [
    "Sub Caregory 1",
    "Sub Caregory 2",
    "Sub Caregory 3",
    "Sub Caregory 4",
    "Sub Caregory 5",
    "Sub Caregory 6",
    "Sub Caregory 7",
    "Sub Caregory 8",
    "Sub Caregory 9",
  ];
  return (
    <div
      className="w-full  bg-white flex items-center overflow-x-scroll remove-scrollbar"
      style={{ zIndex: 5000 }}
    >
      {[...Array(15)].map((_, i) => (
        <CategoryContainer
          key={i}
          className="flex flex-col items-center gap-y-2 min-w-[9rem] relative"
        >
          <AiFillGift className="text-3xl text-[#007A95]" />
          <div className="flex items-center gap-x-1">
            <p>Top Offers</p>
            <IoIosArrowDown className="cursor-pointer text-xs" />
          </div>

          <div
            className="w-[126px] bg-white shadow absolute top-16 subcategories"
            style={{ zIndex: 5001 }}
          >
            {subCategories.map((subCategory, i) => (
              <p className="relative z-50"> {subCategory} </p>
            ))}
          </div>
        </CategoryContainer>
      ))}
    </div>
  );
};

Styled Component code

import styled from 'styled-components';

export const CategoryContainer = styled.div`
    .subcategories{
        display: none;
    }

    &:hover{
        .subcategories{
            display: block;
        }
    }

    
`;

i created a Category div with scrollable and i also want to add a subcategory but the subcategory not working properly its go behind the bottom div so how can I fix that? i try to find any where on googl and youtube so i didnt get a point