UserPicker not working correctly

Forge Forge UI Kit and Custom UI
1

I cannot add and/or remove users from the UserPicker component after it’s saved. If I refresh the whole page, eventually, I can edit the list of users. Sometimes I cannot. I didn’t see any error on the browser console.
The steps to reproduce are:

  1. Create a page, add the macro and save the page
  2. Add some users and click the save button on the macro.
  3. Click on the “load” button in the macro.
  4. Try to add or remove users. You won’t be able to add or remove users. Eventually, the variable “users” changes because the values might change if you click on save and on the load button.
  5. If the page is reloaded, the component might work.

I’m using this component in production, inside a modal, and it’s not working at all.

Screen_Recording

Front end code

import React, { useEffect, useState } from 'react';
import ForgeReconciler, {
  Button, Stack, Box, SectionMessage,
  Heading, UserPicker
} from '@forge/react';
import { invoke } from '@forge/bridge';

const App = () => {
  const [users, setUsers] = useState(undefined)
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    load()
  }, []);

  const load = () => {
    invoke("getUsers").then(response => {
      setUsers(response.users)
      setLoaded(true)
    })
  }

  const save = async () => {
    await invoke("saveUsers", { users })
    setLoaded(false)
  }

  if (!loaded) {
    return <Box>
      <SectionMessage>Data is not loaded...</SectionMessage>
      <Button onClick={ load }>Load</Button>
    </Box>
  }

  return (
    <Box >
      <Stack space="space.200">
        <Heading as="h3">Users</Heading>
        <UserPicker
          defaultValue={ users }
          id="users"
          isMulti
          onChange={ (options) =>
            setUsers(options.map(option => option.id))
          }
          label="Users">
        </UserPicker>
      </Stack>
      <Box>
        <Button onClick={ save }>Save</Button>
      </Box>
    </Box >
  )
}

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Resolver:

import Resolver from "@forge/resolver";
import { storage } from "@forge/api";

const resolver = new Resolver();

resolver.define("getUsers", async ({ context }) => {
  return storage.get("saved-user" + context.localId);
});

resolver.define("saveUsers", async ({ context, payload }) => {
  return storage.set("saved-user" + context.localId, payload);
});

export const handler = resolver.getDefinitions();

Has anyone faced a similar issue?
Thanks