Как этот компонент превратить в Переиспользуемый?

Мне нужно данный компонент сделать переиспользуемым =>

function PopUpEditProject({
  children,
  popUpActive,
  setPopUpActive,
  onHandleToggleModal,
}) {
  return (
    <PopUp popUpActive={popUpActive}>
      <PopUpContent>
        <Wrapper marginBottom={'0'} justify={'space-between'}>
          <PopUpTitle>
            Are You Sure You Want <br />
            <PopUpFocusedTitle>To Go Back</PopUpFocusedTitle>
            To Project
          </PopUpTitle>
          <SubTitle marginBottom={'5px'}>
            That Project Detail Will Not Get Updated
          </SubTitle>
        </Wrapper>
        <Wrapper marginBottom={'0'} justify={'space-evenly'} direction={'row'}>
          <CreateButton
            onClick={() => {
              setTimeout(onHandleToggleModal, 300, 'projectInfo');
              setPopUpActive(false);
            }}
            padding={'0 8px'}
            fontSize={'12px'}
            marginTop={'5px'}
          >
            Yes, Go Back
          </CreateButton>
          <CreateButton
            padding={'0 8px'}
            fontSize={'12px'}
            marginTop={'5px'}
            background={'#e0e0e0'}
            onClick={() => setPopUpActive(false)}
          >
            Cancel
          </CreateButton>
        </Wrapper>
      </PopUpContent>
    </PopUp>
  );
}

export default PopUpEditProject;

Какими способами это можно сделать?

Извините, что не так подробно описал проблему