I want to be able to delete an object from the api and re render the function without having to manually refresh the page, how can I do that?

const Notes = () => {
  const history = useNavigate();

  const [apiData, setApiData] = useState([]);

  useEffect(() => {
    axios
      .get(`https://6390acc765ff4183111b53e9.mockapi.io/notes`)
      .then((getData) => {
        setApiData(getData.data);
      });
  }, []);

  const onDelete = (id) => {
    axios
      .delete(`https://6390acc765ff4183111b53e9.mockapi.io/notes/${id}`)
      .then(() => {
        history("/notes");
      });
  };

This way I can delete the note that i fetched earlier, but it still appears on the screen until I refresh manually. It doesn’t also go to /notes because i am already on /notes