How to reRender the Page after Splice Method in reactJS?

After onClick method to splice array, data seemes to delete but page isn’t updating. How to reRender or update the page to reflect the changes?

Home.js Code ==>

import React from "react";
import "./HomeStyles.css";
import HomeData from "./HomeData";

function Home() {
    function handleDelete(id) {
        var index = HomeData.map(function (e) {
            return e.id;
        }).indexOf(id);
        HomeData.splice(index, 1);
    }

    return (
        <>
            <section className="home_section">
                <div className="home_container">
                    {HomeData.map((item) => {
                        return (
                            <div className="Heading_container" key={item.id}>
                                <h1 className="home_heading">{item.heading}    </h1>
                                <button onClick={handleDelete}>Delete</button>
                            </div>
                        );
                    })}
                    
                    <button className="submit_btn">Submit</button>
                </div>
            </section>
        </>
    );
}

export default Home;

JSON file ==>

const HomeData = [
{
id: 1,
heading: ‘This is first Heading’
},
{
id: 2,
heading: ‘This is Second Heading’
},
]

export default HomeData;

I have tried using useNavigate from react-router-dom and history, but I didn’t work.