react axios and react-hook form problem put in json - reactjs

Question

I am a student who is practicing react js, for this I am developing a calendar in which you can put notes, as you will see there are some notes that I have put by hand. I have installed axios to work the json and the get of the data does it well, but when I try to set a new data it gives me this error.
the browser console shows me this error
PATCH http://localhost:5000/January/3/alarms/ 404 (Not Found) Uncaught
(in promise) Error: Request failed with status code 404 at
createError (createError.js:16) at settle (settle.js:17) at
XMLHttpRequest.handleLoad (xhr.js:62)
this is my JSOn
{
"January": [
{
"id": 1,
"alarms": [
{
"name": "Medico",
"initHour": "12:00",
"endHour": "12:35"
},
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
},
{
"name": "desayuno con Rick",
"initHour": "8:00",
"endHour": "9:00"
}
]
},
{
"id": 2,
"alarms": [
{
"name": "Desayuno",
"initHour": "9:00",
"endHour": "9:35"
},
{
"name": "banco",
"initHour": "11:00",
"endHour": "12:00"
}
]
},
{
"id": 3,
"alarms": []
},{
"id": 4,
"alarms": []
},
{
"id": 5,
"alarms": []
},
{
"id": 6,
"alarms": []
},
{
"id": 7,
"alarms": []
},
{
"id": 8,
"alarms": []
},
{
"id": 9,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 10,
"alarms": []
},
{
"id": 11,
"alarms": []
},
{
"id": 12,
"alarms": []
},
{
"id": 13,
"alarms": []
},
{
"id": 14,
"alarms": []
},
{
"id": 15,
"alarms": []
},
{
"id": 16,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 17,
"alarms": []
},
{
"id": 18,
"alarms": []
},
{
"id": 19,
"alarms": []
},
{
"id": 20,
"alarms": []
},
{
"id": 21,
"alarms": []
},
{
"id": 22,
"alarms": []
},
{
"id": 23,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 24,
"alarms": []
},
{
"id": 25,
"alarms": []
},
{
"id": 26,
"alarms": []
},
{
"id": 27,
"alarms": []
},
{
"id": 28,
"alarms": []
},
{
"id": 29,
"alarms": []
},
{
"id": 30,
"alarms": [
{
"name": "fisio",
"initHour": "16:00",
"endHour": "17:00"
}
]
},
{
"id": 31,
"alarms": []
}
]
}
and this is my code
import React, {useEffect, useState} from "react";
import './Calendar.scss';
import axios from "axios";
import Day from "./Day/Day";
import Modal from 'react-modal';
import { useForm } from 'react-hook-form';
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
export default function Calendar() {
let subtitle;
const { register, handleSubmit} = useForm();
const [days, setDays] = useState([]);
const [modalIsOpen,setIsOpen] = useState(false);
const [id, setId] = useState([]);
Modal.setAppElement('#root')
useEffect(() => {
axios.get('http://localhost:5000/January').then(res => {
setDays(res.data);
});
}, [])
const onSubmit = form => {
console.log('http://localhost:5000/January/' + id + '/alarms', form);
axios.patch('http://localhost:5000/January/' + id + '/alarms/', form).then(res => {
console.log(res);
});
}
function openModal(id) {
setIsOpen(true);
setId(id);
}
function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = 'rgb(72, 181, 163)';
}
function closeModal(){
setIsOpen(false);
}
return (
<div className="b-calendar">
<h3 className="b-calendar__title">January</h3>
<div className="b-calendar__headers">
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
<div>Sunday</div>
</div>
<div className="b-calendar__content">
<div className="b-december"><h1>28</h1></div>
<div className="b-december"><h1>29</h1></div>
<div className="b-december"><h1>30</h1></div>
<div className="b-december"><h1>31</h1></div>
{days.map((item, index) =>
<div key={index+1} id={index+1} onClick={() => openModal(item.id)}>
<Day items={item}/>
</div>
)}
</div>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={_subtitle => (subtitle = _subtitle)}>Añadir Cita</h2>
<form className="b-loginForm" onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="initHour">
<span className="b-text-label">Init hour</span>
<input id="initHour" className="b-input" type="time" name="initHour" ref={register({ required: true})} />
</label>
<label htmlFor="endHour">
<span className="b-text-label">End hour</span>
<input id="endHour" className="b-input" type="time" name="endHour" ref={register()} />
</label>
<label htmlFor="name">
<span className="b-text-label">Alarms name</span>
<input id="name" className="b-input" type="text" name="name" ref={register({ required: true})} />
</label>
<input className="b-btn" type="submit" value="Guardar" />
<button onClick={closeModal}>Salir</button>
</form>
</Modal>
</div>
)
}```
[1]: https://i.stack.imgur.com/PDVPD.png