Problem localStorage React

hello everyone,
here is my problem I would like that after having updated the state, I store it in the localStorage then when I refresh the page the state takes the value of the localStorage,
here is what I did but it doesn’t work

import  React, { useEffect, useState } from "react";
export default function App() {
  const [up, setUp] = useState(0);

useEffect(()=>{
  const data =  localStorage.getItem("number");
  if(data !== null){
    setUp(data);
  }
  
}, [])

useEffect(() =>{
  localStorage.setItem("number", up)
  console.log(localStorage);
}, [up])

  const handleClick = () => {
    setUp(prev => prev + 1);
  };

  return (
    <div className="App">
      <div>{up}</div>
      <button onClick={handleClick}>increment</button>
    </div>
  );
}

here you save up in number variable
but it’s being saved as string not number

therefore instead of increment numbers get concatenated.

FIX:

  React.useEffect(() => {
    const data = localStorage.getItem("number");
    if (data !== null) {
      setUp(Number(data));
    }
  }, []);

  const handleClick = () => {
    setUp((prev) => {
      let n = prev + 1;
      localStorage.setItem("number", n );
      return n;
    });
  };

Make sure to once clear the local storage for localhost:3000

thank you for helping me you are so humble

You’re very welcome.