When reload the page all data disappears in the page in ReactJS

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>
    )
}