Pass props to component wrapper

I have a higher order component that switches between two children (component that renders data and loading component):,the issue is how to pass the loading state that happens in the data component to the hoc in order to do the conditional rendering

Wrapper:

function withLoading<Props>(DataComponent: React.FC<Props>, LoadingComponent: React.FC<Partial<Props>>) {  const newComponent: React.FC<Props & { isLoading: boolean }> = (props) => {    const {      isLoading,    } = props;    if (isLoading) {      return (<LoadingComponent          {...props}        />      );    }    return (<DataComponent        {...props}      />    );  };  return newComponent;}

Data and loading components:

const DataComponent: React.FC<Props> = (props: Props) => {  const fetchData = async (): Promise<void> => {    //Loading Logic happens in this mobx store    await getDataFromBackend();  };  useEffect(() => {    getBranchName();  }, []);return (  //UI)const LoadingComponent = () => {  const {    selectStyle,  } = useStyles(styles);  return (<SkeletonPlaceholderWrapper><View style={styles.loader} /></SkeletonPlaceholderWrapper>  );};export default observer(    withLoading(observer(DataComponent), LoadingComponent) //here the hoc wrapping the two children  ),