How to use the cloudinary-core.Cloudinary.new function in cloudinary-core

sourceOptions() {
      const htmlAttrs = Transformation.new(
        this.transformation
      ).toHtmlAttributes();

      return {
        attrs: merge(
          { media: "all" },
          normalizeRest(this.$attrs),
          omit(htmlAttrs, ["width", "height"]),
          this.publicId
            ? {
                srcset: Cloudinary.new(this.configuration).url(
                  this.publicId,
                  this.transformation
                )
              }
            : null
        )
      };
    }
  }

render() {
    let {publicId, poster, sourceTypes, fallback, sourceTransformation: sourceTransformations, innerRef, ...options} = Object.assign({},
      this.getContext(),
      this.props);
    sourceTransformations = sourceTransformations || {};
    sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
    options = CloudinaryComponent.normalizeOptions(options, {});
    let cld = Cloudinary.new(Util.withSnakeCaseKeys(options));
    let sources = [];
    let tagAttributes = Transformation.new(options).toHtmlAttributes();
    let childTransformations = this.getTransformation(options);
    if (Util.isPlainObject(poster)) {
      let defaults = poster.publicId !== undefined && poster.publicId !== null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
      poster = cld.url(poster.publicId || publicId, Util.defaults({}, Util.withSnakeCaseKeys(poster), defaults));
    }
    if (!Util.isEmpty(poster)) {
      tagAttributes.poster = poster;
    }
    if (!Util.isEmpty(this.state.poster)) {
      tagAttributes.poster = this.state.poster;
    }

    if (Util.isArray(sourceTypes)) {
      sources = sourceTypes.map(srcType => {

const className = {
        "cld-picture__image": true
      };

      const htmlAttrs = Transformation.new(
        this.transformation
      ).toHtmlAttributes();

      return {
        class: className,
        attrs: merge(
          htmlAttrs.width ? { width: htmlAttrs.width } : null,
          htmlAttrs.height ? { height: htmlAttrs.height } : null,
          this.publicId
            ? {
                src: Cloudinary.new(this.configuration).url(
                  this.publicId,
                  this.transformation
                )
              }
            : {},
          this.img
        )
      };
    },

getUrl(extendedProps) {
    let transformation = this.getTransformation(extendedProps);
    let options = Util.extractUrlParams(Util.withSnakeCaseKeys(extendedProps));
    let cl = Cloudinary.new(options);
    return cl.url(extendedProps.publicId, transformation);
  }
}

export function getPlaceholderURL(
  mode,
  publicId,
  configuration,
  transformation
) {
  if (typeof mode === "string") {
    if (mode in placeholderTransformations) {
      return Cloudinary.new(configuration).url(
        publicId, {
          ...transformation,
          transformation: [
            ...(transformation.transformation || []),
            ...placeholderTransformations[mode]
          ]
        }
      );
    }
    return mode;
  }
  return "";
}

this.publicId,
          this.configuration,
          this.transformation
        );
        return {
          class: className,
          style: getResponsiveStyle(this.responsive),
          attrs: merge(normalizeNonCloudinary(this.$attrs), src ? { src } : {})
        };
      }

      const htmlAttrs = Transformation.new(
        this.transformation
      ).toHtmlAttributes();

      const src = Cloudinary.new(this.configuration).url(
        this.publicId,
        merge(this.transformation, {
          transformation: [
            ...(this.transformation.transformation || []),
            getResizeTransformation(
              this.responsive,
              this.size,
              evalBreakpoints(this.breakpoints)
            ),
            ...(this.progressive ? [{ flags: ["progressive"] }] : [])
          ]
        })
      );

      return {
        class: className,