Controllable input using loader function with Await component router 6

[zekson266]

Hello Team, faced with following issue:

loading data from loader
const { postData } = useLoaderData() || {};
...

managing loading via Await

<React.Suspense fallback={<LinearProgress />}>
        <Await
            resolve={postData}
            errorElement={<p>Error loading posts!</p>}
        >
            {(postData) => (

...
than putting it to text filed but can't change it, useState does not help since I cant use hooks inside Await and out side postData not resolved yet, tried to destruct without success

 <TextField
    label="Label"
    fullWidth
    variant="outlined"
    margin="normal"
    type="text"
    name="title"
    value={postData?.title}
    onChange={(ev) => {
               const newPost = { ...postData };
            newPost.title = ev.target.value;
            setPostElements(newPost);
       }}
/>

defaultValue instead of value fixing it but it's not controllable input then, which is not what supposed to be.