As mentioned above the solution requires localStorage, useEffect, useRef. All logic is inside useEffect, because when the component is mounting all the magic happens here. working example

1. Initialize an absolute number with useRef
2. Trying to get value from localStorage, if is empty then we set default value. And the same place, we checking the array index.
3. Second time avoid the check and we increace gotted value andabsolute number.
4. Then sending result to state and localStorage

App.js

import { useState, useEffect, useRef } from "react";

export default function App() {
  const img1 = "https://dummyimage.com/400x200/a648a6/e3e4e8.png";
  const img2 = "https://dummyimage.com/400x200/4e49a6/e3e4e8.png";
  const img3 = "https://dummyimage.com/400x200/077d32/e3e4e8.png";

  let [lsNum, setLsNum] = useState(0);
  // Absolute number '1'
  let count = useRef(1);

  const list = [img1, img2, img3];

  useEffect(() => {
    // Get value from localStorage, transform to number
    const lS = Number(localStorage.getItem("image"));
    // Check! If localStorage have number 2 / more
    // Set number 0
    if (lS >= 2) {
      localStorage.setItem("image", 0);
      return;
    }
    // Get absolute number and increase with number from localStorage
    count.current = count.current + lS;
    // Set result to state
    setLsNum(count.current);
    // Set the resulting number to localStorage
    localStorage.setItem("image", count.current);
  }, []);

  const css = {
    height: "200px",
    width: "400px",
    display: "block",
    backgroundImage: `url(${list[lsNum]})`, // index change
    backgroundPosition: "center",
    backgroundSize: "cover",
    border: "1px solid red"
  };

  return (
    <div className="App">
      <div style={css}></div>
    </div>
  );
}