Can't access data in Context in MERN Stack Application - node.js

Question

Why I can't access my product data from context?
Here is where product data came from:
const Products = props => {
const [user, setUser, addToCart, setChosenImage] = useContext(UserContext);
const [product, productData] = useContext(ProductContext);
...
<div className="product--TopButton--Container">
<button className="about--Button" onClick={() => productData(product._id)}>About</button>
</div>
Here is the context:
export const ProductContext = React.createContext({})
const ProductProvider = ProductContext.Provider;
const ProductContextProvider = (props) => {
const [product, setProduct] = useState({})
const productData = (id) => {
fetch (`${API}/products/details/${id}`, {
method: 'GET',
})
.then (response => response.json ())
.then (response => {
setProduct(response)
})
.then(() => window.location = `/details/${id}`)
.catch (error => {
console.error (error);
})
}
console.log(product)
return (
<ProductProvider value={[product, productData]}>
{props.children}
</ProductProvider>
)
}
export default ProductContextProvider;
Note: The console.log is showing the correct product. But I can't access it in the ProductAbout component.
Here is how I provide it:
<ProductContextProvider>
<Route exact path="/products" component={Products} />
<Route exact path="/details/:id" component={ProductAbout} />
</ProductContextProvider>
Here is where I'm trying to use it:
const ProductAbout = () => {
const [product] = useContext(ProductContext)
console.log(product)
return(
<div>hi{product?.name}</div>
)
}
export default ProductAbout;