dynamic import component inside another using path in react - reactjs

Question

I am new to react. I have a task for importing a component inside another one dynamically.
as you can see I have an AutoComplete component that uses react-select; what I want is when user searches for a value and the value is not provided by the list, the user clicks on Create ... option and a dialog opens containing the needed component ( the component need to by imported at that time). Now I am passing the component as child but I want it more dynamic like passing the path of Component as prop and the AutoComplete loads by the path. any solution?
sample component uses AutoComplete:
<Autocomplete
apiUrl="/coreums/api/provinces"
onChange={(field, value) => {
console.log(`${field} ${value}`);
}}
onCreate={(field) => {
console.log(field);
}}
name="province"
componentName=""
entity={null}
>
{/* <ProvinceUpdate></ProvinceUpdate> */}
<h1>Hello</h1>
</Autocomplete>
as you see I am passing a h1 and it renders but for another component like ProvinceUpdater just want to pass my components path and it will be rendered.
which changes need my AutoComplete?
here is my AutoComplete:
import React, {
Component,
FC,
Suspense,
lazy,
useEffect,
useState,
} from 'react';
import Axios from 'axios';
import CreatableSelect from 'react-select/creatable';
import Select from 'react-select';
import { AvForm } from 'availity-reactstrap-validation';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
interface Props {
name: string;
apiUrl: string;
entity: any;
filterBy?: string;
onChange: (field: string, value: any) => void;
onCreate: (field: string) => void;
componentName?: string;
}
const Autocomplete: FC<Props> = ({
name,
apiUrl,
entity,
onChange,
children,
onCreate,
filterBy = 'name',
componentName,
}) => {
const [myOptions, setMyOptions] = useState([]);
const [childDialogVisible, setChildDialogVisible] = useState(false);
useEffect(() => {
Axios.get(`services/${apiUrl}?cacheBuster=${new Date().getTime()}`).then(
(res) => {
// console.log(res)
setMyOptions(
res.data.map((obj) => {
return { value: obj.id, label: obj[filterBy] };
})
);
}
);
}, []);
const handleChange = (newValue: any, actionMeta: any) => {
if (newValue) onChange(name, newValue.value);
};
const handleInputChange = (inputValue: any, actionMeta: any) => {
Axios.get(
`services/${apiUrl}?name.contains=${inputValue}&cacheBuster=${new Date().getTime()}`
).then((res) => {
setMyOptions(
res.data.map((obj) => {
return { value: obj.id, label: obj.name };
})
);
});
};
const handleCreate = (inputValue) => {
setChildDialogVisible(true);
onCreate(inputValue);
};
const renderFooter = () => {
return (
<div>
<Button
label="No"
icon="pi pi-times"
onClick={() => setChildDialogVisible(false)}
className="p-button-text"
/>
<Button
label="Yes"
icon="pi pi-check"
onClick={() => setChildDialogVisible(false)}
autoFocus
/>
</div>
);
};
return (
<>
<CreatableSelect
options={myOptions}
onChange={handleChange}
onCreateOption={handleCreate}
onInputChange={handleInputChange}
menuPortalTarget={document.body}
/>
<Dialog
header="Header"
visible={childDialogVisible}
style={{ width: '50vw' }}
footer={renderFooter()}
onHide={() => setChildDialogVisible(false)}
>
<Suspense fallback={() => <p>Loading</p>}>{children}</Suspense>
</Dialog>
</>
);
};
export default Autocomplete;