Acrylic blur on sprite

Question

I tweaked the code in this documentation to have a blur on the sprites generated by it. By using Effect brushes as per this example and also guidance from this post. However, the sprite remains unaffected whatsoever and doesn't blur at all. Here is the tweaked code for AddElement

void CompositionHost::AddElement(float size, float x, float y)
{
    if (m_target.Root()) // if there is an actual visual root
    {

        auto visuals = m_target.Root().as<ContainerVisual>().Children();
        auto visual = m_compositor.CreateSpriteVisual();
        // CreateSpriteVisual creates an instance of a SpriteVisual which is basically a 2D box

        auto element = m_compositor.CreateSpriteVisual();
        uint8_t r = (double)(double)(rand() % 255);
        ;
        uint8_t g = (double)(double)(rand() % 255);
        ;
        uint8_t b = (double)(double)(rand() % 255);
        ;

        GaussianBlurEffect blurEffect{};
        winrt::hstring blurStr = winrt::hstring(L"Blur");
        blurEffect.Name(blurStr);
        blurEffect.BlurAmount(1.0f);
        blurEffect.BorderMode(EffectBorderMode::Hard);
        blurEffect.Optimization(EffectOptimization::Balanced);

        CompositionEffectSourceParameter sourceParameter = CompositionEffectSourceParameter(L"source");
        blurEffect.Source(sourceParameter);

        CompositionEffectFactory blurEffectFactory = m_compositor.CreateEffectFactory(blurEffect);
        CompositionEffectBrush blurBrush = blurEffectFactory.CreateBrush();

        CompositionBackdropBrush backDropBrush = m_compositor.CreateBackdropBrush();
        blurBrush.SetSourceParameter(L"source", backDropBrush); // bind backdrop brush to effect brush

        element.Brush(blurBrush); // paints that 2D box
        element.Size({ size, size });
        element.Offset({
            x,
            y,
            0.0f,
            });

        auto animation = m_compositor.CreateVector3KeyFrameAnimation();
        auto bottom = (float)600 - element.Size().y;                  // setting the y-coord of the 1st keyframe where animation should start atz
        animation.InsertKeyFrame(1, { element.Offset().x, bottom, 0 }); // telling where the first keyfram should start at

        using timeSpan = std::chrono::duration<int, std::ratio<1, 1>>; // <> is a template, instead of having many functions for different data types
        // you specify the data types inside <>

        std::chrono::seconds duration(2); // construct new duration, similar to = sign
        std::chrono::seconds delay(3);

        animation.Duration(timeSpan(duration));
        animation.DelayTime(timeSpan(delay)); // delay before animation starts
        element.StartAnimation(L"Offset", animation);

        visuals.InsertAtTop(element); // insert the color on top, top refers to the topmost of the app I think

        visuals.InsertAtTop(visual); // insert the 2D box on top
    }
}

Thanks in advance.