عند استيراد صورة في Next.js، تظهر على أنها تالفة

أحاول استيراد صورة في Next.js ولكنها تظهر تالفة، ولا أفهم السبب. لدي المسار الصحيح للصورة ولكنها تظهر تالفة، وعند وضع المسار مباشرة في src='../pathimagepath/image.svg' يعمل بشكل جيد، ولكن عندما أقوم بتمريره باستخدام استيراد، لا يعمل.

هذا هو الكود الخاص بي:

"use client";
import React, { useState } from 'react';
import Logo from '../assets/Logo.svg';
import hamburgerBtn from '../assets/hamburgerBtn';
import '../app/globals.css';

function Navbar() {
    const [toggle, setToggle] = useState(false);
    const handleClick = () => setToggle(!toggle);

    return (
        <div className='w-full h-[80px] bg-white'>
            <div className="2xl:max-w-[1400px] 2xl:px-[0] xl:max-w-[1180px] lg:max-w-[924px] md:max-w-[668px] sm:max-w-[540px] max-w-[460px] md:px-[0px] sm:px-[40px] px-[40px] m-auto w-full h-full flex justify-between items-center">
                <img src={Logo} className='sm:h-[40px] h-[30px]' />
                <div className="hidden md:flex items-center">
                    <ul className='flex gap-6'>
                        <li>Home</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </div>

                <div className='md:hidden' onClick={handleClick}>
                    <img className="sm:h-[25px] h-[20px]" src={hamburgerBtn} />
                </div>
            </div>
        </div>
    )
}

export default Navbar;

حاولت استيراد الصورة في مكون Logo.jsx ولكن لا تعمل، وأنا أحتاج استيراد كل شيء ككائن لأنني بحاجة إلى عمل toggle بين hamburgerBtn و closeBtn.