The scene renders fine as long as there is no tag being rendered at all.

This is a little bit unclear...

Generally, is there any specific reason for importing Mesh, BoxGeometry, and MeshLambertMaterial from Three.js and trying to use them directly, instead using primitives provided by R3F (i.e.<mesh>, <boxGeometry>, <meshLambertMaterial>)?

Pay attention to the capitalization of the letters in the components...

https://r3f.docs.pmnd.rs/getting-started/your-first-scene#the-result

This template should works fine, if you still get issues, please provide sandbox.

import React, {Suspense} from 'react';     
// import Button from '../components/Button';
import { Canvas } from '@react-three/fiber';
// import CanvasLoader from '../components/CanvasLoader';
// import { Model } from '../components/Model';
import { OrbitControls } from '@react-three/drei';

const HeroSec = () => { 
  return (
    <Canvas>
      <ambientLight args={[2, 2, 5]} intensity={1} color="#ffffff" />
      <directionalLight args={[0, 0, 10]} intensity={1} color="#ffffff" />
      <OrbitControls /> 
      
      <mesh>
        <boxGeometry args={[2, 2, 2]} />
        <meshLambertMaterial color="#ff0357" />
      </mesh>
    </Canvas>
  );
}
export default HeroSec