Howcome form value does not reset? - reactjs

Question

I have a form.
This returns back and loads its value which is correct,
however when I start typing it only returns its value plus one letter from the onChange.
here is what I mean
How do I clear the value of the form when the onChange is executed? I have tried clearing the form using config.setStateVar('') which still does not seem to work. Does anyone have any ideas?
const onChange = (e, config) => {
config.setStateVar('')
const value = e.target.innertext ? e.target.innertext
: e.target.value
config.setStateVar(value)
}
Full Code:
const editCriticalObjects = props => {
const query = new URLSearchParams(props.location.search)
const criticalObjectsId = query.get('id')
const loading = useContext(LoadingContext)
const user = useContext(UserContext)
const [editCriticalObjects, setEditCriticalObjects] = useState([])
const [criticalObjectTitle, setCriticalObjectTitle] = useState('')
const [criticalObjectDomainName, setCriticalObjectDomainName] = useState('')
const [criticalObjectType, setCriticalObjectType] = useState('')
const [findVal, setFindVal] = useState('')
useEffect(() => {
async function onLoadCriticalObjects() {
loading.setLoading(true)
const results = await get(`get_critical_objects?id=${criticalObjectsId}`, user.user)
setEditCriticalObjects(results)
loading.setLoading(false)
}
onLoadCriticalObjects()
}, [])
const assetIdObject = editCriticalObjects.filter(obj => {
if (obj.asset_id === criticalObjectsId) {
return obj
}
return assetIdObject
})
const configs = [
{
label: 'Title',
name: 'Title',
value: assetIdObject.map(item => item.asset_id),
field: SinglelineTextfield,
uniqueIdentifier: 0,
stateVar: criticalObjectTitle,
setStateVar: setCriticalObjectTitle,
},
{
name: 'type',
uniqueIdentifier: 1,
label: 'type',
value: assetIdObject.map(item => item.type),
field: SinglelineTextfield,
stateVar: criticalObjectType,
setStateVar: setCriticalObjectType,
},
{
name: 'Domain',
label: 'Domain',
value: assetIdObject.map(item => item.Domains),
field: SinglelineTextfield,
uniqueIdentifier: 2,
stateVar: criticalObjectDomainName,
setStateVar: setCriticalObjectDomainName,
}
]
const criticalObjectParams = {
asset_ids: criticalObjectTitle,
asset: true,
merge: true,
}
console.log(criticalObjectParams)
const onChange = (e, config) => {
const value = e.target.innertext ? e.target.innertext
: e.target.value
config.setStateVar(value)
}
const onSubmitClick = async () => {
loading.setLoading(true)
await verifiedPost('post_critical_objects', criticalObjectParams, user.user)
loading.setLoading(false)
}
return (!editCriticalObjects ? null :
<PageWrapper title={`Edit Critical Object: ${criticalObjectsId}`}>
<div className='Main Card EditCriticalObjectFormWrapper'>
{configs.map((config, k)=> {
const Field = config.field
return (
<React.Fragment key={k}>
<Field
style={{ marginBottom: '15px'}}
name={config.name}
placeholder={config.name}
value={config.value}
initialValue={config.value}
initialValues={config.value}
uniqueIdentifier={k}
label={config.label}
onChange={(e) => onChange(e, config)}
/>
</React.Fragment>
)
})}
<Button
className='Button Dark Main'
text='Submit'
onClick={onSubmitClick}
/>
</div>
</PageWrapper>
)
}
export default editCriticalObjects