id is undefined in function

i have a global id then i want to use it in onSubmit function

export default function EditColorModal(props) {
  const dispatch = useDispatch();

  const [color, setColor] = useState({});

  const onSubmit = async () => {
    console.log(color);
    await axios.patch(`/admin/color/${color._id}`, {
      name,
      title,
      code,
    });
    const id = color._id;
    dispatch(adminActions.updateColor({ id, title, name, code }));
  };

 return (
    <div>
      <button
        type="button"
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#EditColorModal"
        onClick={() => {
          setColor(props.color);
        }}
      >
        <Edit />
      </button>
</div>

console.log(color) in onSubmit function is undefined but up the function get me value