How to use Localstorage in a functional React component

Question

How can I use Localstorage in this case

the way I did works only with class component

Error that appears is: Typeerror: repositories is not a Function

    export default function Main() {

    const [newRepo, setNewRepo] = useState('');
    const [repositories, setRepositories] = useState([]);
    const [clearInput] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        repositories(localStorage.getItem('repositories'));

        if (repositories) {
            setRepositories(JSON.parse(repositories));
        }
    }, [repositories]);

    useEffect((_, prevState) => {
        if (prevState.repositories !== repositories) {
            localStorage.setItem('repositories', JSON.stringify(repositories));
        }
    });

Answer 1

const App = () => {
  const [repositories, setRepositories] = useState([]);

  useEffect(() => {
    const repositoriesLocal = JSON.parse(localStorage.getItem('repositories'));

    setRepositories(repositoriesLocal)
  }, [])

  return <div>
    {repositories.map(item => <li>{item.name}</li>)}
  </div>;
};