Sheet backdrop does not show

1

I have a Popup from which the user can toggle a Sheet to open. The Sheet opens above the Popup with a higher z-index, but unfortunately the sheet-backdrop has a z-index below that of the popup and hence it does not show.

2 
import Sheet, { SheetProps } from 'framework7-react/components/sheet';
import React, { useEffect, useMemo, useRef } from 'react';
import { Sheet as SheetType } from "framework7/framework7-types";
import { f7 } from 'framework7-react';
import { utils } from 'framework7';

export const SheetF7: React.FC<SheetProps> = (props) => {

    const zindexRef = useRef<any>();
    const id = useMemo(() => props.id || `sheet-${utils.uniqueNumber()}`, [props?.id]);

    useEffect(() => {
        return () => {
            if (props.backdrop && zindexRef.current)
                f7.$('.sheet-backdrop').css('z-index', zindexRef.current);
        }
    }, []);

    const onSheetOpen = (instance?: SheetType.Sheet | undefined) => {
        if (props.backdrop) {
            const backdrop = f7.$('.sheet-backdrop');
            if (!zindexRef.current)
                zindexRef.current = backdrop.css('z-index');
            const me = f7.$(`#${id}`);
            backdrop.css('z-index', +me.css('z-index') - 1);
        }
        props?.onSheetOpen?.(instance);
    }

    const onSheetClose = (instance?: SheetType.Sheet | undefined) => {
        if (props.backdrop) {
            if (zindexRef.current)
                f7.$('.sheet-backdrop').css('z-index', zindexRef.current);
            zindexRef.current = undefined;
        }
        props?.onSheetClose?.(instance);
    }

    return <Sheet
        {...props}
        onSheetOpen={onSheetOpen}
        onSheetClose={onSheetClose} />;

}