Pop up is displayed below another component despite a higher z Index container

[SunD004]

Pop up is displayed below another component despite a higher z Index container.

This is a big problem during user forms. the date selection pop-up should be displayed above all other components for proper functioning.

Example :

`

    <Label className={"font-bold self-center text-[--primary-color]"} text={"Formulaire de location"}/>
    <div className={"absolute top-3 right-3 text-[--primary-color]"}>
        <MdSell/>
    </div>

    <form onSubmit={handleSubmit(submitDealForm)}
          className={"flex flex-col justify-between pt-5 space-y-5 h-full z-20"}>
        <div className={"gap-10 flex-col flex"}>
            <div className="flex flex-col space-y-1 ">
                <Label size={LabelSize.Medium}
                       text={"Durée de la location"}/>
                <Controller
                    name="dateRange"
                    control={control}
                    rules={{required: "Ce champs est requis"}} // Validation rule
                    render={({field}) => (
                        <Datepicker
                            {...field}
                            displayFormat={"DD/MM/YYYY"}
                            placeholder={"Selectionner une date"}
                            primaryColor={"blue"}
                            value={field.value}
                            onChange={(newValue) => {
                                field.onChange({
                                    startDate: newValue?.startDate || null,
                                    endDate: newValue?.endDate || null
                                });
                                void getDealResume({
                                    startDate: newValue?.startDate || null,
                                    endDate: newValue?.endDate || null
                                })
                                // TODO change dates in the url too
                                /*const newParams = new URLSearchParams(params.toString())
                                newParams.set("startDate", newValue?.startDate?.toString() || "")
                                newParams.set("endDate", newValue?.endDate?.toString() || "")
                                router.push(newParams.toString(), { scroll: true })*/
                            }}
                            containerClassName={"z-50"}
                            separator={"au"}
                            showShortcuts={true}
                            inputClassName={`focus:border-[#004dad] outline-none border-2 disabled:cursor-not-allowed
                                relative transition-all duration-300 py-2 pl-4 pr-14 w-full border-gray-300
                                rounded-lg tracking-wide text-color-[#004dad]
                                font-light text-sm placeholder-gray-400 bg-white focus:ring z-50`
                            }
                        />
                    )}
                />
                {errors.dateRange && <span
                    className="text-red-500">{errors.dateRange?.message && <>{errors.dateRange.message}</>}</span>}
            </div>


            <div className={"flex flex-col justify-center items-center"}>
                <Label className={"text-orange-600 font-bold"} size={LabelSize.Small}
                       text={`La location de ${item.name} vous coutera :`}/>
                <p className="font-black text-gray-700 text-xs mt-2">
                    1000 €
                </p>
            </div>

        </div>
        <div className={"pt-5 self-end items-end flex justify-end"}>
            <Button type={"submit"} label={"Confirmer la location"}/>
        </div>
    </form>
</div>)

`