Reactjs 为什么刷新页面时我的localStorage PET值变成空字符串

每次刷新页面时，我的localStorage PET值都会变成空字符串.我使用的是react 和打字SWC(VITE).我被困住了，不知道出了什么问题.请帮帮忙，谢谢！

import { useState, useEffect } from "react";
import petImage from "./assets/kungfudie.gif";

function App(): JSX.Element {
    const [petName, setPetName] = useState<string>("");

    //get data from localStorage on every render
    useEffect(() => {
        const name = localStorage.getItem("PET");
        if (name) {
            setPetName(JSON.parse(name));
        }
    }, []);

    //set localStorage when petName change
    useEffect(() => {
        localStorage.setItem("PET", JSON.stringify(petName));
    }, [petName]);

    return (
        <div className="bg-gray-900 text-gray-100 text-center p-5">
            <h1 className="mb-5">My Pet</h1>
            <input
                placeholder="Set Pet Name"
                value={petName}
                type="text"
                name="petName"
                id="petName"
                onChange={(e) => setPetName(e.target.value)}
            />
            <h1 className="my-5">
                {petName.length > 0 ? `Hi I'm ${petName}` : "Give me a name"}
            </h1>
            <div>
                <img style={{ maxWidth: 500 }} src={petImage} alt="Pet Image" />
            </div>
        </div>
    );
}

export default App;