React Context provider doesn't see data - reactjs

Question

I need to parse data from modal window (Modalbuy.js) to parent component (Page.js) and then to another child, but my Context Provider doesn't see changed data.Despite that fact, if I ask to console.log not in context.provider brackets, but still in parent component, I get my data logs right
Modalbuy.js
import React, {useState} from "react";
import "./modal.css";
import { DataBuyContext } from "../../page/page";
const Modalbuy = ({active, setActive,price}) => {
const [inputVolume, setInputVolume] = useState("")
function saveInput(event) {
setInputVolume(event.target.value)
console.log(inputVolume)
}
const {dataBuy, setDataBuy} = React.useContext(DataBuyContext)
function addBuy() {
setDataBuy([...dataBuy,{side: "BUY", price:{price},volume: {inputVolume},timestamp: new Date().toLocaleTimeString()}])
// console.log(dataBuy)
}
return (
<div className={active ? "modal active" : "modal"} onClick={() => setActive(false)}>
<div className="modal__content" onClick={e => e.stopPropagation()}>
<header>Make order</header>
<p>BUY {price}</p>
<input placeholder="Volume" value={inputVolume} onChange={saveInput}></input>
<div>
<button onClick = {addBuy}>Ok</button>
<button onClick={() => setActive(false)} >Cancel</button>
</div>
</div>
</div>
)
}
export default Modalbuy;
Page.js
import React, {useState} from 'react'
import Trading from '../trading/Trading'
import Archive from '../archive/Archive'
import './page.css';
export const DataBuyContext = React.createContext({})
const Page = () => {
const [dataBuy, setDataBuy] = useState([{}])
const [toggleState, setToggleState] = useState(1)
const toggleTab = (index) =>{
setToggleState(index);
}
console.log(dataBuy)
return (
<DataBuyContext.Provider value = {{dataBuy, setDataBuy}}>
<div className="container">
<div className="block-tabs">
<button
className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
onClick={() => toggleTab(1)}>
Trading
</button>
<button
className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
onClick={() => toggleTab(2)}>
Archive
</button>
</div>
<div className="content-tabs">
<div
className={toggleState === 1 ? "content active-content" : "content"}>
<Trading />
</div>
<div
className={toggleState === 2 ? "content active-content" : "content"}>
<Archive dataBuy= {dataBuy} />
</div>
</div>
</div>
</DataBuyContext.Provider>
);
}
export default Page;
And Archive.js child component, where I want to transport data
import React, {useState} from 'react';
import './archive.css';
import Table from './Table';
const Archive = (dataBuy) => {
const [rows, setRows] = useState(dataBuy)
console.log(rows)
return (
<Table dataBuy = {rows}/>
)
}
export default Archive;
App.js
import './App.css';
import React from 'react';
import Page from './components/page/page'
function App() {
return (
<div className="App">
<Page/>
</div>
);
}
export default App;