[Solved]-Looking for a clever way to render multiple children component dynamically-Reactjs

If you're decided on having an individual modal component that switches behaviour based on state/props you could approach it like this:

const modals = {
  type1: {
    Header: <div>Modal1 Header</div>,
    Content: <div>Modal1 Content</div>,
    open: true,
  },
  type2: {
    Header: <div>Modal2 Header</div>,
    Content: <div>Modal2 Content</div>,
    open: true,
  },
};

const Modal = ({type}) => {
  const [modalType, setModalType] = useState(type);
  const { Header, Content, open } = modals[modalType];

  return (
    <>
      <SemanticModal
        Header={Header}
        Content={Content}
        open={open}
      />
    </>
  );
};

An alternative to consider is creating a reusable BaseModal component which you extend into a seperate component for each use case:

const BaseModal = ({ Header, Content, open }) => {
  return (
    <>
      <SemanticModal Header={Header} Content={Content} open={open} />
    </>
  );
};

const Modal1 = () => {
  return (
    <BaseModal
      Header={<div>Modal1 Header</div>}
      Content={<div>Modal1 Content</div>}
      open={true}
    />
  );
};

The nice thing about this pattern is that you still get to share the common elements of all modals whilst selectively injecting the parts that need to differ