localstorage 데이터가 지워집니다.

import React, { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
import styled from "styled-components";

function App() {
  localStorage.setItem("searchList", JSON.stringify([]));

  const [value, setValue] = useState("");
  const handleInput = (e) => {
    setValue(e.target.value);
  };

  const submit = (e) => {
    e.preventDefault();
    let findItem = localStorage.getItem("searchList");
    findItem = JSON.parse(findItem);
    findItem.push(value);
    localStorage.setItem("searchList", JSON.stringify(findItem));
  };
  return (
    <div className="App">
      <button onClick={test}>클릭하면 기사 나옴</button>
      <form onSubmit={submit}>
        <input type="text" onChange={handleInput} value={value} />
        <button type="submit">localStorage에 저장</button>
      </form>
      {value}

    </div>
  );
}

function Card({ title }) {
  return <>{title}</>;
}

input에 값을 입력하고 submit 하면 로컬스토리지의 배열에 입력한 값이 저장되게 하고 싶은데, 새로고침을 하면 값이 전부 사라집니다. 어떻게 해야 할까요?

localStorage.setItem("searchList", JSON.stringify([]));  맨 위에 이 코드 때문에 로드 될때마다 새로 만들어져서 그런것 같은데,, 어떤방법이 있을까요,,?