Create a new fileP13N.tsunder models/Banner. It contains a single function which returns the p13n variant that depends on the experience state.

export const getP13NTargets = (self: P13NExperience): Array<CmTeasable> => {
  const { previewP13NExperiences } = usePreviewContextState();
  const previewP13Variants = previewP13NExperiences && previewP13NExperiences.variants;
  // previewP13Variants can be set to 'baseline' (preview 'eye' usecase)
  const p13nVariants = self && self.variants && self.variants.slice();
  const baseline = self && (self.baseline as CmTeasable);
  if (baseline) {
    p13nVariants?.push({ id: "baseline", target: baseline });
  }
  let p13nTargets = baseline && [baseline];
  if (previewP13Variants && p13nVariants) {
    p13nTargets = p13nVariants
      .filter((p13nVariant) => previewP13Variants.indexOf(p13nVariant.id) >= 0)
      .map((p13nVariant) => p13nVariant.target as CmTeasable);
  }
  //again when there are no variants left fallback to baseline
  if (p13nTargets.length === 0) {
    p13nTargets = baseline && [baseline];
  }
  return p13nTargets;
};

Create a container preview of the p13n experience content item P13NExperience.asContainerPreview.tsx under components/FragmentPreview/views/:

const getContainer = (items: Array<Dispatchable>, rootSegment: string): Slot => {
  return {
    items: items.map((item) => initializeBannerFor(item, rootSegment)).filter(notEmpty),
  };
};

const P13NExperienceAsContainerPreview: React.FC<IncludeProps<P13NExperience>> = ({ self, params }) => {
  const { rootSegment } = useSiteContextState();
  const Container = slotByName(params?.containerView as string);
  const p13NTargets = self && getP13NTargets(self);
  return <>{p13NTargets && <Container {...getContainer(p13NTargets, rootSegment)} />}</>;
};
export default P13NExperienceAsContainerPreview;

This view uses the function getP13NTargets to render the chosen variant.

Modify the function initializeBannerFor in models/Banner/Banner.ts

...
    } else if (type && type.indexOf("P13NExperience") >= 0) {
    const p13NTargets = getP13NTargets(self as P13NExperience);
    return initializeBanner(p13NTargets.at(0) as CmTeasableFragment, rootSegment);
    }

Add the newly created container preview to the viewDispatcher in components/FragmentPreview/FragmentPreview.tsx

viewDispatcher.addViewComponent(P13NExperienceAsContainerPreview, "P13NExperience", "asContainerPreview");