rabobas

JSON.parse возвращает простые объекты, которые React не может отрендерить.
Вместо хранения React-элементов храните минимальные данные, необходимые для генерации компонентов. Генерируйте элементы на основе этих данных при рендере.

Код от AI:

import React from 'react';

const initialData = JSON.parse(localStorage.getItem('components')) || [];

export function App() {
  const [componentsData, setComponentsData] = React.useState(initialData);

  React.useEffect(() => {
    localStorage.setItem('components', JSON.stringify(componentsData));
  }, [componentsData]);

  function addComponent() {
    setComponentsData(prev => [
      ...prev,
      { id: Math.random().toString(36).slice(2), content: Math.floor(Math.random() * 100) }
    ]);
  }

  const components = componentsData.map(item => (
    <div key={item.id}>{item.content}</div>
  ));

  return (
    <>
      <button onClick={addComponent}>click</button>
      <div>{components}</div>
    </>
  );
}

ps и если хотите разобраться как работать с чем-то, то посмотри как это написано у других - useLocalStorage

В целом - да. Конструкция [...someArray, newElement] создает новый массив, включает туда все элементы из someArray, и добавляет newElement в конец нового массива.

Однако, оффтоп заметка: конкретно в данном случае с такой простой логикой (выведение последовательных чисел), список, кажется, излишен. Можно просто хранить цифру-количество элементов и от них плясать через index+1.

Есть нюанс. Вы используете потенциально устаревшие данные. Советую переписать на вот такой вариант:

function ImmutabelArr() {
    let [notes,setNotes] = useState([1,2,3,4,5])

    let result = notes.map((note,index) => {
        return <li key={index}>{note}</li>
    })
    function addLi() {
        setNotes(prevNotes => [...prevNotes, prevNotes.length + 1])
    }
    	return <div>
            <ul>
                {result}
            </ul>
            <button onClick={addLi}>add li</button>
	          </div>;     
}

Рекурсия заставляет код "углубляться" внутрь структуры данных, доходя до самого конца, а затем начинает возвращаться обратно, выполняя оставшуюся часть кода для каждого уровня вызова. Это и приводит к тому, что значения выводятся в обратном порядке.
Либо так:

if(typeof list[elem] == 'object') {
        		console.log(list.value);
            reverseNext(list[elem])
        }

Либо так:

if(typeof list[elem] == 'object') {
            reverseNext(list[elem])
        } else {
        	console.log(list.value)
        }

Вариантов развития событий два:

1. Вы используете неверное сравнение. Например, у вас в target.innerHTML есть пробелы по краям, или какие-то теги, или не совпадает регистр.
   
2. Условие срабатывает верно, но поскольку вы меняете стиль одного и того же элемента, вы не учитываете предыдущие или последующие итерации.
   

Сделайте пример в песочнице и мы вас скажем точно, в чём проблема.