Error product form must be given a product while displaying product details using app proxy

Technical Q&A
1

I want to render the Product page along with some custom information when I hit my App Proxy URL and return liquid from it.

const product = shopifyResponse.product;
     const { productName, description, assets } = contextualizedProductData;

let liquid = '';

    // Assign section variables;
    liquid += '{% assign section_id="' + section.id + '" %}';
    liquid += '{% assign product_handle="' + product.handle + '" %}';
    if (productName) {
      productTitle = productName;
    } else {
      productTitle = product.title;
    }
    if (description) {
      productDescription = description;
    } else {
      productDescription = product.body_html;
    }
    // If contextualized image is null, send index of images from shopify api instead
    if (contextualizedProductData.imageId) {
      // Find imageID index on product.images
      const imageIdIndex = product.images.findIndex((image) => {
        return image.id.toString() === contextualizedProductData.imageId;
      });
      productFeaturedImage = imageIdIndex;
    } else {
      productFeaturedImage = -1;
    }
    liquid += "{% assign title='" + productTitle + "'%}";
    liquid += "{% assign image_index='" + productFeaturedImage + "'%}";
    if (productDescription !== null)
      liquid +=
        "{% assign description='" +
        helper.escapeHtml(productDescription) +
        "'%}";

    liquid += "{% include 'product-details' %}";

    liquid += '';

If I run this then the below error comes on my store page. The line points to where my form starts inside main-product . How do I make sure the form and product details (image, title, price, etc.) loads?

Liquid error (line ###): product form must be given a product