I am creating a webpage with Next.js 13.4.8 and when I try to add a background video to the page, I get this error:

Failed to compile

./public/homeFeatureSectionVideo.mp4
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

This error occurred during the build process and can only be dismissed by fixing the error.

The code for the component that contains the background video looks like this:

"use client"

import React, { useState, useEffect } from 'react'

import './homeFeature.css'
import homeFeatureSectionVideo from '../../public/homeFeatureSectionVideo.mp4'

export const HomeFeature = () => {
    const [hasWindow, setHasWindow] = useState(false)

    useEffect(() => {
        if (typeof window !== 'undefined') {
            setHasWindow(true)
        }
    }, [])

    return (
        <>
            {hasWindow &&
                <div className="homefeature">
                    <video src={homeFeatureSectionVideo} autoPlay muted loop className='video-bg' />

                    <div className='bg-overlay'></div>

                    <div className="feature-text">
                        <h1>George Muu & Associates</h1>
                        <p>The premier audit firm in Kenya</p>
                    </div>

                    <div className="feature-btn">Talk to Us</div>
                </div>
            }
        </>
    )
}

How can I resolve this error?