State.init({ pocket: {}, }); const handleGetPocket = (id) => { try { fetch(`https://dev-pocket-api.hamsterbox.xyz/api/pool/${id}`).then( (result) => State.update({ pocket: result.body }) ); } catch (err) { console.log(err); } }; console.log(state); return ( <div> <button type="button" ref="forwardedRef" onClick={() => handleGetPocket("645cc82ad0ad713a23988971")} className="violet Button" > Get pocket </button> <Avatar.Root className="AvatarRoot"> <Avatar.Image className="AvatarImage" src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" alt="Colm Tuite" /> <Avatar.Fallback className="AvatarFallback" delayMs={600}> CT </Avatar.Fallback> </Avatar.Root> <Avatar.Root className="AvatarRoot"> <Avatar.Image className="AvatarImage" src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80" alt="Pedro Duarte" /> <Avatar.Fallback className="AvatarFallback" delayMs={600}> JD </Avatar.Fallback> </Avatar.Root> <Avatar.Root className="AvatarRoot"> <Avatar.Fallback className="AvatarFallback">PD</Avatar.Fallback> </Avatar.Root> {state.pocket && state.pocket._id} </div> );