smart home project toggle a spesific product and remember

i start learning react before a month ago and i am still learning! i have a little problem with project of smart home like you can see i add 2 componente code (if you want i will add all) for the spesific problem that i have i need to toggle the spesific product on click which is mean that i have an object of the product name and the switch in the first componente i show the room with the products and create a new product evrey time in the second componente i create state that toggle the spesific product light but i need when i toggle the spesific product that he will remember when i go back buy in the first componente i create to the object "false" how i will fix it?

by the way i can upload the code to sandbox code if it will help you! thank you

Sandbox: https://codesandbox.io/s/smart-home-project-liors-s4sodl

import React, { useState } from "react";
import { Link,useNavigate } from "react-router-dom";
import Product from "./Product";
const SpesificRoom = ({ rooms, setRooms, spesificUser }) => {
  const nav = useNavigate()
  const [displayProductsOption, setDisplayProductsOption] = useState("none");
  const [roomProducts, setRoomProducts] = useState(spesificUser.products);

  return (
    <div style={{ backgroundColor: spesificUser.roomColor }} className="spesificRoomContainer">
      <div className="spesificRoom">
        <h1>Room!</h1>
        <div className="spesificRoomDeatils">room type : {spesificUser.roomType}</div>
        <div className="spesificRoomDeatils">room name : {spesificUser.roomName}</div>
        <div>
          {spesificUser.products.length > 0 && spesificUser.products.map((products, index) => {
                return (<Product index = {index} productName = {products.product} productSwitch = {products.switch}/>)})
}
        </div>
        <button
          onClick={(e) => {
            setDisplayProductsOption("block");
            e.target.style.display = "none";
          }}
          className="addProductsBtn"
        >
          add product
        </button>
      </div>
      <div style={{ display: displayProductsOption }} className="spesificRoomDisplay">
        <select
          id="selectAddProducts"
          onChange={(e) => {
            if (spesificUser.roomType !== "bathRoom" && e.target.value == "boiler") {
              alert("err");
              return (e.target.value = "");
            }
            setRoomProducts([...roomProducts, { product: e.target.value, switch: true }]);
          }}
        >
          <option value="">choose product</option>
          <option value="air conditioner">air conditioner</option>
          <option value="boiler">boiler</option>
          <option value="lamp">lamp</option>
          <option value="stereo">stereo</option>
        </select>

        <Link to={"/"}>
          <button
            id="addProductsSpesificRoom"
            onClick={() => {
         
              const roomAfterMap = rooms.map((room) => {
                if (spesificUser.roomName == room.roomName) {
                  return { ...room, products: roomProducts };
                } else return { ...room };
              });
              setRooms(roomAfterMap);
            }}
          >
            Add!
          </button>
        </Link>
      </div>
    </div>
  );
};

export default SpesificRoom;

import React, { useState } from "react";

const Product = ({ index, productName}) => {
  const [toggleSwitch, setToogleSwitch] = useState(false);
  return (
   

    <button   className="productBtn"
      key={index}
      style={{ backgroundColor: toggleSwitch ? "white" : "black" }}
      onClick={() => {
        setToogleSwitch((prev) => {
          return !prev;
        });
      }}
    
      >
      {" "}
      {productName}
    </button>
  
  );
};

export default Product;