using jotai is quite easy: https://codepen.io/geordanisb/pen/EaVmBXV

import React from "https://esm.sh/react";
import ReactDOM,{createRoot} from "https://esm.sh/react-dom/client";
import * as jotai from "https://esm.sh/jotai";

const list = [1,2,3];
const state = jotai.atom(list);

const el = document.querySelector('#app');
const root = createRoot(el);

const useJotaiState = ()=>{
  const[data,setdata]=jotai.useAtom(state);
  
  const add = (n)=>{
    setdata(p=>[...p,n])
  }
  return {data,add};
}

const List = ()=>{
  const{data}=useJotaiState();
  return <ul>
      {
        data.map(d=><li>{d}</li>)
      }
    </ul>
}

const Add = ()=>{
  const{add}=useJotaiState();
  const addCb = ()=>{
    add(Math.random());
  }
  return <button onClick={addCb}>add</button>
}

const App = ()=>{
  
  return <>
    <Add/>
    <List/>
  </>
}
root.render(<App/>)