How to reRender the Page after Splice Method in reactJS?

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

Home.js:

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;

Data:

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 it didn't work.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/egcioSD