[React Hooks]連想配列のstateの更新がうまくいかない

Question

前提・実現したいこと

React Hooksを使って連想配列のstateを更新したいと思っています。
しかしstateを確認してみると何も変化がないか、最後尾に追加されてしまうようになっています。
その数字に対応したところを変更したいのですが、うまくいきません。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

const handleChange = date => {
    let day = date.getDate();
    let time = { ...props.time };
    time[day] = date;
    props.setTimes(time);
    console.log(props.time);
  };

や

const handleChange = date => {
    let day = date.getDate();
    props.setTime(({ ...props.time, [day]: date }));
    console.log(props.time);
  };

の場合

{30: Mon Apr 20 2020 16:13:41 GMT+0900 (日本標準時), 31: Mon Apr 20 2020 16:13:41 GMT+0900 (日本標準時)}

stateの変更がありません。
これに対して

const handleChange = date => {
    let day = date.getDate();
    props.setTime(({ ...props.time, day: date }));
    console.log(props.time);
  };

の場合

31: Mon Apr 20 2020 16:19:08 GMT+0900 (日本標準時) {}
day: Mon Apr 20 2020 12:00:10 GMT+0900 (日本標準時) {}

末尾に新たなキーとして付け加えられます。

該当のソースコード

const [time, setTime] = React.useState({
1: new Date(),
2: new Date(),
・・・
});

<Sample time={time} setTime={setTime} />

export default function Sample(props) {
//省略
//該当箇所
const handleChange = date => {
    
};
//省略
}