How can I update crisp content onto my screen when doing zoom using direct manipulation in windows desktop app?

Question

I am new to windows world and trying to learn direct manipulation. I am able to handle the scroll and screen updating in that case. With zoom direct manipulation maps existing pixel to new pixel size. For eg say I have a 400x 400 window and it has 4 images 200x200 each. When I zoom to 2x one of the images will get drawn on 400x400 and thus appear pixelated. Now I am trying to update the viewport content in OnViewportUpdated call to draw a sharp image of size 400x400. when I do so it gets drawn at the original image position I am providing and with original scale only and thus 4 images are replaced by 1. I am using below methodology

ComPtr<IDXGISurface1> dxSurface;
 screenSurface->BeginDraw(&rect, IID_PPV_ARGS(&dxSurface), &point);
hr = dxSurface->GetDC(FALSE, &hSurfaceDC);

if (SUCCEEDED(hr))
{
            HBITMAP hBitmapOld = NULL;

            // Create a compatible DC and select the surface 
            // into the DC.
            hBitmapDC = CreateCompatibleDC(hSurfaceDC);
            if (hBitmapDC != NULL)
            {
                HBITMAP hBitmap = CreateCompatibleBitmap(GetDC(_hWnd), 400, 400);
                hBitmapOld = (HBITMAP)SelectObject(hBitmapDC, hBitmap);
                SelectObject(hBitmapDC, GetStockObject(DC_BRUSH));
                SetDCBrushColor(hBitmapDC, RGB(255, 0, 0));
                Rectangle(hBitmapDC, 0, 0, 400, 400);
                BitBlt(hSurfaceDC, 0, 0,
                    400, 400, hBitmapDC, 0, 0, SRCCOPY);
                
            }
}

I am wondering if using IDXGISurface1 is the right methodology or not. How can I use directcomposition for drawing in conjunction with directmanipulation