How to change instance color by r3f?

[neciszhang]

Hi, I create instance all by use gltfjsx.I don't know how to do it, I need to generate 10 instances.Cube with different colors.Please help.
Here is codesandbox link

import React, { useRef, useMemo, useContext, createContext } from "react";
import { useGLTF, Merged } from "@react-three/drei";

const context = createContext();
export function Instances({ children, ...props }) {
  const { nodes } = useGLTF("/magicCube0622.glb");
  const instances = useMemo(
    () => ({
      Arrow: nodes.arrow1,
      Cube: nodes.cube,
    }),
    [nodes]
  );
  return (
    <Merged meshes={instances} {...props}>
      {(instances) => (
        <context.Provider value={instances} children={children} />
      )}
    </Merged>
  );
}

export function Model(props) {
  const instances = useContext(context);
  return (
    <group {...props} dispose={null}>
      <instances.Arrow />
      <instances.Cube />
    </group>
  );
}