How to Create an Irregular 3D Polygon extruded shape React-Three-Fiber

So far, I've only created 3D rectangles with the useBox statement. Is there a way to create something like a "two by four" piece of wood that has the two ends cut at some angle, similar to the picture below?

Code/demo can be found here: https://codesandbox.io/s/ragdoll-physics-forked-bntr9?file=/src/index.js

I think the problem is tjat I'm mixing various samples from Three.js and React-Three-Fiber.

From this video https://youtu.be/3eGeh_aJxMI?t=509, I got the idea that I could probably create a 2D polygon shape, and then extrude it into 3D. If there is a better approach, please let me know. It uses a 'scene.add', but since I'm in react-three-fiber, I think I have to change that part to use my existing canvas.

The example below is not the shape I want, just a first demo with a triangle extruded to 3D (the video above used a heart shape).

I don't know what element to use in the return statement. When I try "" or "" I got errors (I can list the errors, but not sure those are the right elements to use, so won't include the errors for now.) Lowercase "" allows it to run without errors, but I cannot see any object representing my 3D extruded triangle on the display.

const Truss1 = () => {
  var trussPosition = [5, 5, 5];
  const trussBoard1FlatShap = new Shape();

  const x = 0;
  const y = 0;
  const moveSize = 40;
  trussBoard1FlatShap.moveTo(x - moveSize, y - moveSize);
  trussBoard1FlatShap.lineTo(x + moveSize, y - moveSize);
  trussBoard1FlatShap.lineTo(x, y + moveSize);

  var extrudeSettings = { amount: 30, bevelEnabled: false };
  var extrudeSettings2 = {steps: 2,
    depth: 16,
    bevelEnabled: true,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1}
  var material = new MeshLambertMaterial({ color: 'red'});

  var trussBoard1Extruded = new ExtrudeGeometry(trussBoard1FlatShap, extrudeSettings);  
   // I also tried extrudeSettings2 from above. 
  var trussBoard1Mesh = new Mesh(trussBoard1Extruded, material);
  trussBoard1Mesh.position.z = 55;
  
  const [cube] = useBox(() => ({ type: 'Static', position: [0, -3, -9.8], args: [0.25, 2, 0.25] }))

  return (
       <>
           <mesh scale={[8, 8, 8]} ref={trussBoard1Mesh} > 
           </mesh> 
           <Box scale={[1, 1, 1]} ref={cube} > 
           </Box> 
       </>
    )
}
    ...
    ReactDOM.render(
      <Canvas style= shadows orthographic camera=>
        <CameraControls />
        <color attach="background" args={['#171720']} />
        <fog attach="fog" args={['#171720', 20, 70]} />
        <ambientLight intensity={0.2} />
        <pointLight position={[-10, -10, -10]} color="red" intensity={1.5} />
        <Physics iterations={15} gravity={[0, -200, 0]} allowSleep={false}>
          <Plane position={[0, -5, 0]} rotation={[-Math.PI / 2, 0, 0]} />
          <Lamp />
          <Table />
          <DynTable>{/* <texture  attach="map" image={'/images/wood_andrey-haimin-q2Fyzn-KJOQ-unsplash.jpg'} /> */}</DynTable>
          <DynShed />
          <Truss1 />
        </Physics>
      </Canvas>,
      document.getElementById('root')
    )

from How to Create an Irregular 3D Polygon extruded shape React-Three-Fiber