How to use the @babylonjs/core.Color4 function in @babylonjs/core

constructor () {
    super()

    this.state = {
      plane: undefined,
      showModal: false,
      clickMeshName: undefined,
      allowedMeshes: [
        'red box',
        'blue box',
        'green box'
      ],
      sceneClearColor: new Color4(0.5, 0.5, 0.5, 0.5)
    }

    this.meshPicked = this.meshPicked.bind(this)
    this.setPlane = this.setPlane.bind(this)
    // TODO: fix that bind() is needed on assignment on button pointerDown handlers
  }

const clickedMeshName = mesh.name
      let clickedMeshColor
      let sceneClearColor
      switch (clickedMeshName) {
        case 'red box':
          clickedMeshColor = Color3.Red().toHexString()
          sceneClearColor = new Color4(1, 0, 0, 0.5)
          break
        case 'blue box':
          clickedMeshColor = Color3.Blue().toHexString()
          sceneClearColor = new Color4(0, 0, 1, 0.5)
          break
        case 'green box':
        default:
          clickedMeshColor = Color3.Green().toHexString()
          sceneClearColor = new Color4(0, 1, 0, 0.5)
          break
      }

      this.setState((state) => ({
        ...state,
        showModal: true,
        clickedMeshName,
        clickedMeshColor,
        sceneClearColor
      }))
    } else {
      console.log('ignoring clicks on:', mesh.name, this.state)
    }
  }

meshPicked (mesh) {
    if (this.state.allowedMeshes.indexOf(mesh.name) !== -1) {
      const clickedMeshName = mesh.name
      let clickedMeshColor
      let sceneClearColor
      switch (clickedMeshName) {
        case 'red box':
          clickedMeshColor = Color3.Red().toHexString()
          sceneClearColor = new Color4(1, 0, 0, 0.5)
          break
        case 'blue box':
          clickedMeshColor = Color3.Blue().toHexString()
          sceneClearColor = new Color4(0, 0, 1, 0.5)
          break
        case 'green box':
        default:
          clickedMeshColor = Color3.Green().toHexString()
          sceneClearColor = new Color4(0, 1, 0, 0.5)
          break
      }

      this.setState((state) => ({
        ...state,
        showModal: true,
        clickedMeshName,

const BouncyPlayground = () => {
    const sphereRef = useCallback(node => {
        sphere = node.hostInstance;
    }, []);

    return (
        
            

this.setState((state) => ({
      ...state,
      sceneClearColor: new Color4(0.5, 0.5, 0.5, 0.5),
      allowedMeshes: state.allowedMeshes.filter(name => name !== state.clickedMeshName)
    }))

render () {
    return (
      
        
        
          
          
          
        
      
    )
  }
}

meshPicked (mesh) {
    if (this.state.allowedMeshes.indexOf(mesh.name) !== -1) {
      const clickedMeshName = mesh.name
      let clickedMeshColor
      let sceneClearColor
      switch (clickedMeshName) {
        case 'red box':
          clickedMeshColor = Color3.Red().toHexString()
          sceneClearColor = new Color4(1, 0, 0, 0.5)
          break
        case 'blue box':
          clickedMeshColor = Color3.Blue().toHexString()
          sceneClearColor = new Color4(0, 0, 1, 0.5)
          break
        case 'green box':
        default:
          clickedMeshColor = Color3.Green().toHexString()
          sceneClearColor = new Color4(0, 1, 0, 0.5)
          break
      }

      this.setState((state) => ({
        ...state,
        showModal: true,
        clickedMeshName,
        clickedMeshColor,
        sceneClearColor
      }))
    } else {