저희는 hook 방식을 사용하고 있습니다

MultiSelect 컨트롤의 onChange 이벤트 내에서 state value가 일치하지 않는 상황입니다

https://demo.grapecity.co.kr/wijmo/learn-wijmo/Input/MultiSelect/Overview/react 에서 

코드를 테스트해 보아도 동일한 상황입니다. class 방식에서는 재현되지 않고요

위 페이지 내에서 아래 코드 그대로 붙여넣고 확인한 바 로그에 test state는 계속 false 상태를 유지하고 있습니다.

import "bootstrap.css";
import "@grapecity/wijmo.styles/wijmo.css";
import "./app.css";
//
import * as React from "react";
import { useState } from "react";
import * as ReactDOM from "react-dom";
import * as wjInput from "@grapecity/wijmo.react.input";
import { getData } from "./data";
//
function App() {
  const [data, setData] = useState(getData());

  const [showSelectAllCheckbox, setShowSelectAllCheckbox] = useState(false);
  const [showFilterInput, setShowFilterInput] = useState(false);
  const [test, setTest] = useState(false);
  const [checkedItems, setCheckedItems] = useState([]);

  const onCheckedItemsChanged = (sender) => {
    console.log("test", test);
    setCheckedItems(sender.checkedItems);
  };
  const changeShowSelectAll = (event) => {
    setShowSelectAllCheckbox(event.target.checked);
  };
  const changeShowFilterInput = (event) => {
    setShowFilterInput(event.target.checked);
  };
  const changeTest = (event) => {
    setTest(event.target.checked);
  };

  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-xs-5">
          <div className="form-group">
            <wjInput.MultiSelect
              placeholder="Countries"
              headerFormat="{count:n0} countries"
              displayMemberPath="country"
              showSelectAllCheckbox={showSelectAllCheckbox}
              showFilterInput={showFilterInput}
              itemsSource={data}
              checkedItemsChanged={onCheckedItemsChanged}
            ></wjInput.MultiSelect>
          </div>
          <div className="form-group">
            <label>
              Show "Select All" box
              <input
                id="selectAll"
                type="checkbox"
                checked={showSelectAllCheckbox}
                onChange={changeShowSelectAll}
              />
            </label>
          </div>
          <div className="form-group">
            <label>
              Show "Filter" input
              <input
                id="filter"
                type="checkbox"
                checked={showFilterInput}
                onChange={changeShowFilterInput}
              />
            </label>
          </div>
          <div className="form-group">
            <label>
              Test
              <input
                id="test"
                type="checkbox"
                checked={test}
                onChange={changeTest}
              />
            </label>
          </div>
        </div>
        <div className="col-xs-7">
          <p>
            <b>Test State: {`${test}`}</b>
          </p>
          <p>
            <b>Checked Items:</b>
          </p>
          <ul>
            {checkedItems.map((item, index) => {
              return <li key={index}>{item.country}</li>;
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));