Change Preview.ts to use the newly introduced p13n experience context. Implement a new function which extracts the experience url parameter which is set when the user chooses an experience:

export const getPreviewP13NExperiences = (queryParams: string): Object | undefined => {
  const p13nExperiences = new URLSearchParams(queryParams).get("p13n_experiences");
  return (isPreview() && p13nExperiences && JSON.parse(p13nExperiences)) || undefined;
};

Modify App.tsx so that the preview context provider is set by this function:

const previewP13NExperiences = getPreviewP13NExperiences(location.search);
  ...
      <PreviewContextProvider previewDate={previewDate} previewP13NExperiences={previewP13NExperiences}>

Implement a previewListener in PreviewPage.tsx

// catch the function to set the p13n context and state
  const { setExperience } = usePreviewContextState();

  // the p13 hook which is used by studio "eye".
  const previewListener = (event: MessageEvent) => {
    const data = event.data;
    if (data.type === "previewExperience") {
      const variantId = data?.body?.variantId;
      const exp: PreviewP13NExperiences = { variants: [variantId] };
      setExperience && setExperience(exp);
    }
  };
  window.addEventListener("message", previewListener, false);