クレジットカードの情報アップデートすることを想定します。

クレジットカードの型情報

export type CreditCard = {
id: string
name: string
imgUrl: string
companyName: { value: string }
expirationMonth: string
expirationYear: string
holderName: string
number: string
}

useStateで初期値を入れる

const [card, setCard] = useState<CreditCard>({
id: '',
name: '',
imgUrl: '',
companyName: { value: '' },
expirationMonth: '',
expirationYear: '',
holderName: '',
number: ''
})

これでオブジェクトの一部を更新

<Grid item xs={12}>
<TextField
type="month"
variant="outlined"
fullWidth
onChange={e =>
setCard({
...card,
expirationMonth: e.target.value
})
}
label="有効期限"
/>
</Grid>

更新ボタンを押す

<Button
color="primary"
variant="contained"
fullWidth
onClick={async () => {
updateCard()
}}
>
更新する
</Button>

アップデートされたクレカの状態

const updateCard = () => {
console.log('アップデートされたカードの情報')
console.log(card)
}

ログ出力

expirationMonth: "2021-08"
expirationYear: ""
holderName: ""
id: ""
imgUrl: ""
.
.
.
割愛