React - context not updating - reactjs

Question

I am learning React by taking the implementation of reading a csv file, and breaking it into separate components that share data with context.
The problem is that after the user selects a file with FileSelector component, the state in ColumnsSelector is not updated, and file object (in ColumnSelector component) is still an empty object.
Thanks
Code:
FileSelector.jsx component gets the file from the user:
import React, { useContext } from "react";
import { DataContext } from './DataContext'
// Allowed extensions for input file
const allowedExtensions = ["csv"];
const FileSelector = () => {
const newError = useContext(DataContext).newError;
const changeFile = useContext(DataContext).changeFile;
const handleFileChange = (e) => {
if (e.target.files.length) {
const inputFile = e.target.files[0];
const fileExtension = inputFile?.type.split("/")[1];
if (!allowedExtensions.includes(fileExtension)) {
newError("Please input a csv file");
return;
}
changeFile(inputFile);
}
};
return (
<div>
<label htmlFor="csvInput" style={{ display: "block" }}>
Enter CSV File
</label>
<input
onChange={handleFileChange}
id="csvInput"
name="file"
type="File"
/>
</div>
);
};
export default FileSelector;
ColumnsSelector.jxs will be updated after the user selects a file, and will return the file headers:
import React, { useContext } from "react";
import Papa from "papaparse";
import { DataContext } from './DataContext'
// Allowed extensions for input file
const allowedExtensions = ["csv"];
const ColumnsSelector = () => {
const data = useContext(DataContext).data;
const changeData = useContext(DataContext).changeData;
const error = useContext(DataContext).error;
const newError = useContext(DataContext).newError;
const file = useContext(DataContext).file; // object is empty also after user uploads a file!
const handleParse = () => {
// If user clicks the parse button without
// a file we show a error
if (!file) return newError("Enter a valid file");
// Initialize a reader which allows user
// to read any file or blob.
const reader = new FileReader();
// Event listener on reader when the file
// loads, we parse it and set the data.
reader.onload = async ({ target }) => {
const csv = Papa.parse(target.result, { header: true });
const parsedData = csv?.data;
const columns = Object.keys(parsedData[0]);
changeData(columns);
};
reader.readAsText(file);
};
return (
<div>
<div>
<button onClick={handleParse}>Parse</button>
</div>
<div style={{ marginTop: "3rem" }}>
{Object.keys(data).length === 0 ? "" : data.map((col,
idx) => <div key={idx}>{col}</div>)}
</div>
</div>
);
};
export default ColumnsSelector;
DataSelector.jsx is a container for both components
import React, { useState } from "react";
import { DataProvider } from './DataContext'
import FileSelector from './FileSelector';
import ColumnsSelector from './ColumnsSelector'
// Allowed extensions for input file
const allowedExtensions = ["csv"];
const DataSelection = () => {
// This state will store the parsed data
const [data, setData] = useState([]);
// It state will contain the error when
// correct file extension is not used
const [error, setError] = useState(null);
// It will store the file uploaded by the user
const [file, setFile] = useState("");
const providerOptions = {
data: {},
changeData: (value) => setData(value),
error: {},
newError: (value) => setError(value),
file: {},
changeFile: (value) => setFile(value),
}
return (
<div>
<DataProvider value={providerOptions}>
<FileSelector />
<ColumnsSelector/>
</DataProvider>
</div>
);
};
export default DataSelection;
app.js holds DataSelector component:
import React from 'react';
import './App.css';
import DataSelector from './DataSelector';
function App() {
return (
<div className="App">
<header className="App-header">
<div>
<DataSelector />
</div>
</header>
</div>
);
}
export default App;
DataContext.js defined the context:
import React from 'react';
export const DataContext = React.createContext({});
export const DataProvider = DataContext.Provider;
export const DataConsumer = DataContext.Consumer;