Untitled

import React, { useState } from "react";
import { Box } from "../../../../../../../Sources/bm.front.millenet.retail/libs/design-system/components/src";


export const TopBarProgress = ({ steps, currentStep }: { steps: number; currentStep: number }) => {
  const { centerElementRef } = useMobileTopBar();

  return (
    <>
      {centerElementRef && (
        <Portal container={centerElementRef}>
          <Box>
            {/*progress bar implementation here*/}
          </Box>
        </Portal>
      )}
    </>
  );
};



export const TopBarSearch = ({ value, onChange }: { value: string; onChange: (value: string) => void }) => {
  const { centerElementRef } = useMobileTopBar();

  return (
    <>
      {centerElementRef && (
        <Portal container={centerElementRef}>
          <Box>
            {/*some search implementation here here*/}
          </Box>
        </Portal>
      )}
    </>
  );
};



// przykładowa implementacja topbara

export const Topbar = () => {
  const [centerElementRef, setCenterElementRef] = useState<HTMLDivElement>(null);
  
  return <Topbar>
    <Box display="flex" ref={setContactRef} />
  </Topbar>
  
  
}





i teraz w dowolnym miejscu w kodzie, mogę wywołać <TopBarSearch ... />
i search pojawi mi się w topbarze
zauważ że zarówno TopbarSearch jak i TopbarProgress używają tej samej referencji do boxa, więc renderują sie w dokładnie w tym samym miejscu przez użycie Portalu

teraz pytanie jak mogę zrobić, aby renderował się tylko jeden (ostatni) element w boxie 
teraz jest tak, że jak mam aktywny gdzieś TopBarProgress, 
  a później włączę TopBarSearch używając po prostu tego gdzieś w kodzie, to w topbarze pojawią mi się te dwa elementy naraz, a chciałbym aby TopbarProgress zniknął, i pojawił się Search