How do you render textures & shaders on react-three-fiber bufferGeometry?

Question

Basically, I have a scene that looks like this: As you can see, the black mesh (This is of is supposed to be blue, and have a shadow casted on it from the red mesh, however this doesn't happen.

import React, { Suspense, useMemo } from 'react'
import Input from 'react-bootstrap/InputGroup'

import * as THREE from 'three'
import { Canvas, useLoader} from "@react-three/fiber";
import { OrbitControls, softShadows } from "@react-three/drei";

import { TextureLoader } from "three/src/loaders/TextureLoader";


import {Container} from "react-bootstrap";
import Box from './Box';
import TexturePlane from './TexturePlane';
import DisplayPlane from './DisplayPlane';
import texture from '../images/blocks/stone.png';
import { BufferAttribute, MeshBasicMaterial, MeshStandardMaterial } from 'three';

softShadows()

const View = (props) => {

  const textureMap = new THREE.TextureLoader().load(texture);

  const vertices = new Float32Array( [
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,

     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0, -1.0,  1.0,

    1.0,  1.0,  1.0,
    1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,
] );



  const color_vertices = new Float32Array([
    1.0 , 1.0 , 0.0 ,1,
    1.0 , 1.0 , 0.5 ,1, 
    1.0 , 0.0 , 1.0 ,1,

    1.0 , 1.0 , 0.0 ,1,
    1.0 , 0.5 , 0.0 ,1, 
    1.0 , 0.0 , 1.0 ,1,
        
    1.0 , 1.0 , 0.0 ,1,
    1.0 , 0.5 , 0.0 ,1, 
    1.0 , 0.0 , 1.0 ,1,
  ]);

  return (

<Container>
  <Canvas shadows style={{ position: "relative", width: 750, height: 750 }}  gl={{ antialias: false }}>
  <ambientLight intensity={0.9} />

  <directionalLight 
  castShadow
  position={[9, 9, 9]} 
  intensity={1.9}  
  shadow-mapSize-width={1024}
  shadow-mapSize-height={1024}
  shadow-camera-far={100}
  shadow-camera-left={-15}
  shadow-camera-right={15}
  shadow-camera-top={20}
  shadow-camera-bottom={-10}

  />

  <OrbitControls enableZoom = {true} />
  <Suspense fallback={null}>

    {/*Generate scene here: */}
    {/*bottom: */}

    <mesh castShadow receiveShadow position={[1,1,1]}>
    <bufferGeometry attach="geometry" >
      <bufferAttribute attachObject={['attributes', 'position']} 
      array={vertices}
      itemSize={3}
      count={9}
      computeVertexNormals="true"
      />
      <bufferAttribute attachObject={['attributes', 'rgba']}
      array={color_vertices}
      itemSize={4}
      count={9}

      />
    </bufferGeometry>
    <meshStandardMaterial attach="material" color="blue"/>
    </mesh>

    <mesh castShadow receiveShadow position={[1.5,2,2]}>
    <bufferGeometry attach="geometry" >
      <bufferAttribute attachObject={['attributes', 'position']}
      array={vertices}
      itemSize={3}
      count={9}
      computeVertexNormals="true"
      />
    </bufferGeometry>
    {/* <meshStandardMaterial attach="material" color="green"  /> */}
    <shaderMaterial attach="material" 
      />
    </mesh>


    <DisplayPlane/>

    </Suspense>
  </Canvas>
</Container>
);}

I've tried to map rgba properties onto the mesh and using shaderMaterial, it gave me a (255,0,0) red (like the mesh at 2,2,2), However any other mesh type besides <meshBasicMaterial> simply shows up black.

I've used <planeBufferGeometry> and simply just mapped textures on the standard material type <meshStandardMaterial> and it was casting shadows and being casted on.

export default function TexturePlane(props) {


  
    const colorMap = useLoader(TextureLoader, texture);
    colorMap.minFilter = THREE.NearestFilter;
    colorMap.magFilter = THREE.NearestFilter;

  //[Math.PI / 2, 0, 0] Flat plane facing up

   return (
     <mesh position={[props.x, props.y, props.z]} rotation={props.rot} scale={[1, 1, 1]} castShadow receiveShadow>

      <planeBufferGeometry />
      <meshStandardMaterial attach="material" color={props.col} map={colorMap} />
    </mesh>
   );
}

I do realize that <bufferGeometry> passing thru structure attributes is vertex based but haven't had any success mapping textures that can be cast shadows on. (I've tried to set the normal vectors to true, put the castShadow & recieveShadow on, etc.. no luck, does any one know what i'm doing wrong?