Im trying to split my React components, and allow me to load some parts in a dinamic way, so i create 2 components in this way:

    const PluginComponent = ({ pluginComponent }) => {

    const DynamicComponent = React.lazy(() => import(`../components/${pluginComponent}.jsx`));
        const [formData, setFormData] = useState({ 
        input: '',
        output: ''
    });
        const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            [name]: value
        }))
        console.log(formData)
    };
    
    return (
        <div>
            <p>This is the {pluginComponent} plugin component.</p>
            <React.Suspense fallback={<div>Loading...</div>}>
                <DynamicComponent
                    formData={formData}
                    handleInputChange={handleInputChange}

                />
            </React.Suspense>
        </div>
    );
};
export default PluginComponent;

const ExamplePlugin = () => {
    return (
        <>
            <input name="input" defaultValue={formData.input} onChange={handleInputChange} type="text" className="grow" placeholder="name here..." />
        </>
    );
};
export default ExamplePlugin;

My problem is, if i leave the formData and handleInputChange logic in the ExamplePlugin, all is working correctly, and the data is updates with no issues, but when i move the logic to the PluginComponent, and pass to the children as props, every time i change the input value, the children realoads completly, appearring the “loading” message, and cause the input to lose the focus for the reload.

is there a way to use the parent to store the data and logic, allow the children to use that for the inputs, and prevent the children to reload completly on every change?