I have a problem with displaying a list for user selection. When I open the page for the first time, it works correctly. But after I reload the page, the users "disappear" or are unloaded. Before reload After reload. Here is the code I have.

My-page:

const Page = observer(() => {
  const { project } = useContext(Context);
  const [modalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    fetchUsers().then((data) => project.setUsers(data));
  }, []);

  return (
      <Container>
        <Button onClick={() => setModalVisible(true)}>
          ChooseUser
        </Button>
        <ChooseUser show={modalVisible} onHide={() => setModalVisible(false)} />
      </Container>
  );
});
export default Page;

Modal:

const ChooseUser = observer(({ show, onHide }) => {
  const { project } = useContext(Context);
 
  return (
    <Modal show={show} onHide={onHide}>
      <Form>
            <Form.Select>

              {/* The problem with this list */}

              {project.users.map((user) =><option>{user.username}</option>)}
            </Form.Select>
        </Form>
    </Modal>
  );
});

Context creating in index.js:

export const Context = createContext(null);

ReactDOM.render(
  <Context.Provider value={{
    project: new ProjectStore(),
  }}
  >
    <App />
  </Context.Provider>,
  document.getElementById('root'),
);

ProjectStore

export default class ProjectStore {
  constructor() {
    this._users = [];
    makeAutoObservable(this);
  }

  setUsers(value) {
    this._users = value;
  }

  get users() {
    return this._users;
  }
}