solution: i changed the hook to:

const [flagC, setFlagC] = useState(props.cars[i].state===on? 'green' : 'red');

and the function to:

const onOff=()=>{debugger;
        if(props.cars[i].state===on){
          setFlagC('red');
          props.cars[i].state=off;
        }
        else if(props.cars[i].state===off){
          setFlagC('green');
          props.cars[i].state=on;
        }
    }

i have an array in my app.js thats holds cars and each car has state on/off:

let cars=[{name: 'mazda', state: off},{name:'toyota', state:off},{name: 'volvo', state:off}];

now i have component that recives this array and display each car in diffrent button (using map at app.js):

{cars.map((val,i)=>{
  return <ComponentName  carName={val.name} index={i}/>
})}

i created inside the component a hook thats hold red color: const[flagC,setFlagC]=useState('red');

and a function thats supposed to check what is the car state and if its off set the button background color red and if its on set is green+set the state as "on". its changes the color of the car but as i pass to another page on the app it set it back to red but the state remains on. what i need to change?

heres the function:

const[flagC,setFlagC]=useState('red');

    const onOff=()=>{debugger;
        if(props.cars[i].state===on){
          props.cars[i].state=off;
          setFlagC('red');
        }
        if(props.cars[i].state===off){
          props.cars[i].state=on;
          setFlagC('green');
        }
    }

the value get the correct car by index and the hook is the style of the button+the butoon has onClick.

 <button style={{backgroundColor: flagC}} onClick={onOff}>{props.carName}</button>