When reload the page all data disappears in the page in ReactJS - node.js

Question

Uncaught TypeError: Cannot read properties of null (reading 'imageLink')
The above error occurred in the <ProductMoreDetails> component:
This Products page Display all the products in the database. When I click on any product card it will redirects to the more details page of that product. First time it loads without any issue and when I refresh the page or backward the page it will disappear all the content in the page.
ProductMoreDetails.js
import Navbar from "../components/Navbar";
import { useProductsContext } from "../hooks/useProductsContext";
import { useParams } from "react-router-dom";
import { useEffect } from "react";
//setproducts
const ProductMoreDetails = () => {
const {products,dispatch} = useProductsContext();
const {id} = useParams();
useEffect(() => {
const fetchProducts = async () => {
const response = await fetch(`/api/products/${id}`)
const json = await response.json()
if (response.ok) {
dispatch({type: 'SET_PRODUCTS', payload: json})
}
}
fetchProducts()
},[dispatch,id])
return (
<div className="moredetails">
<Navbar/>
<br /><br />
<div className="details">
<img className="productImage" src={products.imageLink} alt="productImage" />
<div className="details-section"></div>
<div className="row section1">
<div className="col-lg-8">
</div>
<div className="col-lg-2">
<button className="btn btn-primary addnew">Add to Cart</button>
</div>
</div>
<div className="row section1">
<div className="col-lg-8">
<h1>{products.productName}</h1>
</div>
<div className="col-lg-2">
<h1>Rs. {products.price}</h1>
</div>
</div>
<div className="section1">
<hr />
<h1>Product Details</h1>
<br />
<div className="row">
<div className="col-lg-6">
<div className="row">
<div className="col-lg-6">
<h6>Category</h6>
</div>
<div className="col-lg-6">
<p>{products.category}</p>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="row">
<div className="col-lg-6">
<h6>Brand</h6>
</div>
<div className="col-lg-6">
<p>{products.brand}</p>
</div>
</div>
</div>
</div>
<br />
<div className="row">
<div className="col-lg-6">
<div className="row">
<div className="col-lg-6">
<h6>Model</h6>
</div>
<div className="col-lg-6">
<p>{products.model}</p>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="row">
<div className="col-lg-6">
<h6>Year</h6>
</div>
<div className="col-lg-6">
<p>{products.year}</p>
</div>
</div>
</div>
</div>
<br />
<div className="row">
<div className="col-lg-6">
<div className="row">
<div className="col-lg-6">
<h6>Features</h6>
</div>
<div className="col-lg-6">
<p>{products.features}</p>
</div>
</div>
</div>
</div>
<hr />
<div className="section2">
<h1>Product Description</h1>
</div>
<p>
{products.description}
</p>
</div>
</div>
</div>
)
}
export default ProductMoreDetails;
ProductContext.js
import { createContext } from "react";
import { useReducer } from "react";
export const ProductsContext = createContext();
export const productsReducer = (state, action) => {
switch (action.type) {
// set products
case "SET_PRODUCTS":
return {
...state,
products: action.payload,
}
//set a single product
case "SET_PRODUCT":
return {
...state,
products: action.payload,
}
case 'CREATE_PRODUCT':
return {
products: [action.payload, ...state.products]
}
case 'DELETE_PRODUCT':
return {
products: state.products.filter((product) => product._id !== action.payload._id)
}
case 'UPDATE_PRODUCT':
return {
products: state.products.map((product) => product._id === action.payload._id ? action.payload : product)
}
default:
return state;
}
}
export const ProductsContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(productsReducer, {
products: null
})
return (
<ProductsContext.Provider value={{...state, dispatch}}>
{ children }
</ProductsContext.Provider>
)
}