I’m using useImperativeHandle and ref to let the parent have access to some functions.
I’m wondering why the modal here is not closing? I tried to place alert and console.log and it works but the setIsEditOpen() and setIsDeleteOpen() is not working inside the closeModals.

Product.tsx

export default function Products() {
    const { products } = useLoaderData<typeof loader>();
    const actionData = useActionData<typeof action>();
    const productItemRef = useRef<ModalRef>(null);

    useEffect(() => {
        if (actionData?.ok) {
            productItemRef?.current.closeModals();
        }
      }, [actionData]);

    return (
        <div className="divide-y">
            {products.map((product) => (
                <ProductItem
                    key={product.id}
                    product={product}
                    ref={productItemRef}
                    lastResult={actionData}
                />
            ))}
        </div>
    )

ProductItem.tsx

type ProductItemProps = {
    product: {
        id: string;
        name: string;
        description: string;
        price: number;
        category: string;
    };
    lastResult?: any;
};

export type ModalRef = {
    closeModals: () => void;
};

export const ProductItem = forwardRef(
    ({ product, lastResult }: ProductItemProps, ref: Ref<ModalRef>) => {
        const [isEditOpen, setIsEditOpen] = useState(false);
        const [isDeleteOpen, setIsDeleteOpen] = useState(false);
        const { name, description, price, category } = product;

        useImperativeHandle(ref, () => ({
            closeModals: () => {
                setIsEditOpen(false);
                setIsDeleteOpen(false);
            },
        }));

        return (
            <>
                <ReusableSheet
                    isOpen={isEditOpen}
                    setIsOpen={setIsEditOpen}
                    title="Edit a product"
                >
                    <EditProductForm
                        setIsOpen={setIsEditOpen}
                        product={product}
                        lastResult={lastResult}
                    />
                </ReusableSheet>
                <ReusableDialog
                    isOpen={isDeleteOpen}
                    setIsOpen={setIsDeleteOpen}
                    title="Remove a product from the list"
                    description={
                        <span>
                            Are you sure you want to remove{" "}
                            <span className="font-bold">{name}</span>{" "}
                            from the list of products?
                        </span>
                    }
                    hideCloseButton
                >
                    <DeleteProductForm setIsOpen={setIsDeleteOpen} product={product} />
                </ReusableDialog>
            </>
        );
    },
);