Как динамически изменить массив? React js

У меня есть два компонента, в первом компоненте массив, который я хочу динамически изменить (например при нажатии на кнопку) и передать во второй компонент. Но я немного запутался. Буду благодарен за подсказку

Первый компонент с массивом

import React, {useState} from 'react';
import Context from './Context';
import Products from './Products';
function App() {
  let [arr, setArr] = React.useState([
    {id: 1, name: "Something1", price: 500,},
    {id: 2, name: "Something2", price: 1000,},
  ])

  return (
    <Context.Provider value={arr}>
      <div className="App">
        <Products />
      </div>
    </Context.Provider>
  );
}
export default App;

Второй компонент

import React, { useContext } from 'react';
import Context from './Context';
function Products() {
    const arr = useContext(Context);
    return(
        <div className="Products">
            {arr.map(item => {
                return(
                    <div key={item.id}>
                        <h1>{item.id}</h1>
                        <h2>{item.name}</h2>
                        <h3>{item.price}</h3>
                    </div>
                )
            })}
        </div>
    )
}
export default Products;