Adding React.lazy or react-loadable and doing dynamic import (Code splitting) causes some of my functionalities to breaks

I was looking for a way to import my components dynamically, simply by using their name, after looking for a while i got to know about code splitting and things like React.lazy, react-loadable, and loadable-component, i made a few test case and after understanding how everything works i managed to implant it in my project and refactor my classes to work with this
The main issue i encountered was that a few things in my application broke, for example my checkbox not working and ... i managed to fix this after moving the dynamic import from inside the render to outside, within a function and then calling that function and passing a props to do a dynamic import, now another thing is broken and i'm afraid, more things such as this might happen, is this because of how the dynamic importing works?! should i stop using it ??, i spent the whole day trying to understand whats wrong with my previously working codes!
Now my question is, is there some kind of guide line i have to follow to use dynamic coding which i'm not and now its making my code break, or are these methods simply too experimental and kinda buggy in some cases?!, or maybe its too late for a project which is already half way through to add something like this to the project?,
Here is my code with its latest changes just so you get a rough idea of what i'm doing:

const AsyncPage = loadable(props => import(`${props.page}`))

class MyClassComponent extends Component {
    render  () {
        const importPath = './UI/' + UIType + '/' + UIType; 
        return (                            
            <AsyncPage page={importPath} {someOtherComponentProps}>{UIchildrens}</AsyncPage>
        )
    }
}

Any help and tips is much appreciated thanks.