Pass data to HOC dynamically which should be out of component where initialization should not happen everytime

Question

    const templateName = 'product-edit.panel.general-details';

const Template = TemplateLoader(templateName, true);;

const Settings = (): JSX.Element => {
  const [selectedTemplate, setSelectedTemplate] = useState('product-edit.panel.general-details');
  return (
    <Layout
      className='product-edit-page-edit-view'
      siderLeft={
        <NavigationTreeWrapper>
          <NavigationTree selectedItem={selectedTemplate} onItemClicked={setSelectedTemplate} />
        </NavigationTreeWrapper>
      }
      content={<Template />}
    />
  );
};

export default Settings;

Pass data to HOC dynamically which should be out of component where initialization should not happen everytime..which results in rerendering same template on updates