Incorporate the p13n experience as part of the preview context. To that end, expand first the interface PreviewContext in PreviewContextProvider.tsx:

interface PreviewContext {
  previewDate?: string;
  previewP13NExperiences?: PreviewP13NExperiences;
  setExperience?: Function;
}

export interface PreviewP13NExperiences {
  variants?: string[];
}

Expand PreviewContextProvider to provide the experience context. Notice that the experience context is used as state. Later you will use the setExperience function to change the variant chosen by the experience or segment, which in turn will trigger a new rendering of the experience or segment documents.

interface Props {
  previewDate?: string;
  previewP13NExperiences?: PreviewP13NExperiences;
}

export const PreviewContextProvider: React.FC<Props> = ({ children, previewDate, previewP13NExperiences }) => {
  const [exp, setExp] = useState(previewP13NExperiences);
  const previewContextValue: PreviewContext = {
    previewDate: previewDate,
    previewP13NExperiences: exp,
    setExperience: setExp,
  };
  return <previewDataContext.Provider value={previewContextValue}>{children}</previewDataContext.Provider>;
};