Images source not updating in gatsby build using localstorage

[shameer-rahman]

I'm trying to show different set of images for the users who visit the website for the first time using localstorage, everything works as expected in gatsby develop but when I build the site using gatsby build for production use it always returns images which meant to show only for the first time users. here is the full code

import * as React from 'react';
import { Component } from 'react';

let visited = typeof window !== 'undefined' && window.localStorage.getItem('visited')
var items = [
  "https://picsum.photos/id/40/200/300", 
  "https://picsum.photos/id/30/200/300",
  "https://picsum.photos/id/20/200/300",
  "https://picsum.photos/id/10/200/300"
]

class IndexPage extends Component {

  reTargetImages() {
        typeof window !== 'undefined' && window.localStorage.setItem("visited", true);
    }

  componentDidMount() {
    this.reTargetImages()
  }

  render() {
    if(!visited) {
      items = [
        "https://picsum.photos/id/10/200/300", 
        "https://picsum.photos/id/30/200/300",
        "https://picsum.photos/id/20/200/300",
        "https://picsum.photos/id/40/200/300"
      ]
    }
    return (
      <main>
        <title>Home Page</title>
        <h1>Congratulations</h1>
          <br />
          <span>— you just made a Gatsby site! </span>
          {items && items.map((item, index) => {
            return (
              <img key={`img-${index}`} alt="" id={`img-${index}`} src={item} />
            )
          })}
      </main>
  )
  }
}

export default IndexPage

The code always returns images meant for first-time users even though the localstorage is set properly. i'e

      [
        "https://picsum.photos/id/10/200/300", 
        "https://picsum.photos/id/30/200/300",
        "https://picsum.photos/id/20/200/300",
        "https://picsum.photos/id/40/200/300"
      ]

the issue occurs only in production build and works fine in development build