How to delete data from firebase realtime database - reactjs

Question

I create one table where data get from firebase realtime database. I am adding one delete button on each row in table. Onclick on delete button data should be delete on front end and backend also. But my issue is that when I am click on delete button data is deleted but after refreshing page data get back, data is not deleted from backend. I don't get where I do mistake in code please anyone can help me to solve this issue.
I share my code below.
TableData.js
import React, { Component } from 'react'
import StartFirebase from "../firebaseConfig/index";
import { ref, onValue} from 'firebase/database';
const db = StartFirebase();
export class TableData extends Component {
constructor(props) {
super(props);
this.state = {
tableData: []
}
}
componentDidMount(props) {
const dbRef = ref(db, 'userRecord')
onValue(dbRef, (snapshot) => {
let records = []
snapshot.forEach(childSnapshot => {
let keyName = childSnapshot.key;
let data = childSnapshot.val()
records.push({ "key": keyName, "data": data })
})
this.setState({ tableData: records })
})
}
DeleteData = ({ id, e,props }) => {
fetch(`https://clientsdata-dd45a-default-rtdb.firebaseio.com/userRecord/:${id}.json`,{
method: 'DELETE',
header:{
Accept:"application/json",
"Content-Type":"application/json"
}
}).then((res) => {
res.json().then((resp) => {
window.alert('Are you sure wanted to delete data?: ' + id)
console.log(id) //display id of particule click
const tableData = this.state.tableData.filter((i) => i.id !== id) //if i.id !==id then show
this.setState({ tableData: tableData })
tableData.splice(id, 1)
this.setState({ tableData: tableData })
window.alert("You delete the data successfully!")
console.log(tableData)
})
})
}
render() {
return (
<div>
<table className="table table-bordered table table-hover">
<thead>
<tr>
<th>#</th>
<th scope="col">ID</th>
<th scope="col">Roll</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
{
this.state.tableData.map((row, id) => {
return (
<tr key={id}>
<th key={id} >{row.key}</th>
<th scope="row">{id+1}</th>
<td>{row.data.userData.RollNum}</td>
<td>{row.data.userData.Name}</td>
<td>{row.data.userData.Address}</td>
<td>{row.data.userData.mobile}</td>
<td>{<button className='btn btn-danger' key={row.id} value={row.data.userData.value} id={row.data.userData.value} onClick={(e) => this.DeleteData({id,e})}>Delete</button>}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
}
export default TableData