Как передать массив объектов через Context? React js

У меня есть массив объектов, но я не пойму как передать его в другой компонент. С обычным объектом разобрался, а вот с массивом что-то не понял. Буду благодарен за подсказку

Первый компонент, откуда хочу передать массив

import React, {useState} from 'react';
import Context from './Context';
import Products from './Products';

function App() {
  let arr = [
    {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 {id, name, price} = useContext(Context);
    return(
        <div className="Products">
            <h1></h1>
            <h2></h2>
            <h3></h3>
        </div>
    )
}

export default Products;