When importing an image in Next.js it shows corrupted

I am trying to import an image in next.js but it shows corrupted. I don’t understand why.
I have the correct path to the image but it shows corrupted.
Putting the path directly in the src=”https://stackoverflow.com/questions/pathimagepath/image.svg” works fine, but when I pass it with an import it doesn’t work.

Corrupted img

This is my code

"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;

I tried to import it in a Logo.jsx but it doesn´t work.
I need to import everything as an object because I need to make a toggle with the hamburgerBtn and a closeBtn.

Use the <Image /> component from next/image

"use client";

import "../app/globals.css";

import React, { useState } from "react";
import Logo from "../assets/Logo.svg";
import hamburgerBtn from "../assets/hamburgerBtn.svg";
import Image from "next/image";

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">
                <Image src={Logo} alt="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}>
                    <Image className="sm:h-[25px] h-[20px] " src={hamburgerBtn} alt="menu icon" />
                </div>
            </div>
        </div>
    );
}

export default Navbar;