A importação de ativos não está sendo resolvida corretamente. Preciso fazer algo extra?

Então, enquanto eu estava tentando trabalhar na Navbar me deparei com um problema porque preciso importar um array NavLinks, contendo o texto para os navLinks, que criei como um Array dentro do index.js dentro de uma pasta chamada "constantes" dentro do src.

foi assim que importei para o Navbar.jsx

import { useState } from "react";
import { navLinks } from "../constants";

const Navbar = () => {
  return (
  <div>home</div>  )
}

export default Navbar

e é assim que meu arquivo index.js se parece.

import { agile, behanceLogo, design_minded_icon, discordLogo, envelopeIcon, girlDesk3D, githubLogo, sassLogo, cssLogo, htmlLogo, javascriptLogo, linkedInLogo, messageIcon, mongodbLogo, moonIcon, multiculturalIcon, nodejsLogo, paperplaneIcon, personIcon, profile_bewerbung_foto, reactLogo,typescript_logo, paperplaneIcon, backtoTop } from "../assets";

export const navLinks = [
    {
        id: "home",
        title: "Home",
    },
    {
        id: "work",
        title: "Work"
    },
    {
        id: "about",
        title: "About"
    },
    {
        id: "contact",
        title: "Contact"
    }
];

export const features = [
    {
        id: "feature-1",
        icon: agile,
        title: "Agile",
        content: "Experience with a methodology that emphasizes collaboration and continuous improvement.", 
    },
    {
        id: "feature-2",
        icon: design_minded_icon,
        title: "Design-minded",
        content: "The driving aspect for any of my designs has a start in the consideration of human interaction and focus on the design principles.", 
    },
    {
        id: "feature-3",
        icon: multiculturalIcon,
        title: "Multicultural",
        content: "I am an adaptable individual who has had experience working in a multicultural team.", 
    },
]

export const about = 
    {
        title: "about",
        parragraf1: "Hi there! 👋🏻 , My name is Nathalia Padron. I am originally from Caracas, Venezuela and I am currently based in Stuttgart, since 2016.",
        parragraf2: "Before making the leap into Front-end Design I studied Product Design in IDC ( Instituto de Diseno de Caracas ) and worked several years as a Grafic Designer in Germany and Venezuela.",
        parragraf3: "I feel comfortable working with CSS and JavaScript and I continue to learn React, I would love to extend my skillset to perform tasks related to UX/UI. Also, I have recently received a certification in MERN Stack and continue to learn and develop my understanding towards the backend.",
        recently: "Recently I have been working with the following technology Stack",
        logos: [
            htmlLogo,
            cssLogo,
            javascriptLogo,
            sassLogo,
            typescript_logo,
            reactLogo,
            nodejslogo,
            mongodbLogo,
        ],
    }

    export const technologieStack = [
        {
            title1: "Libraries & Frameworks",
            technologies: 
            [
                "Tailwind CSS",
                "Bootstrap",
                "Sass",
                "React",
            ]
        }, 
        {
            title2: "Design Tools",
            technologies: 
            [
                "GoogleFonts",
                "Figma",
                "Canva",
            ]
        },
        {
            title3: "Other Tools",
            technologies: 
            [
                "VS Code",
                "Git + Hub",
                "Azure DevOps",
                "Chrome Dev Tools",
            ]
        },
    ]
        
export const cards = [
    {
        name: "MLAY TOURS",
        content: "A MERN Stack project developed as a last project for a bootcamp I finished at DCI. Worked with a customer and developed brand identity.",
        link: "",
    }
]

export const contactForm = {
    parragraf1: "I'm interested in a position within a team environment in a Web Agency working on large and creative projects.",
    parragraf2: "However, if you have a request or question, don't hesitate to use this form.",
    inputs: [
        {
            name: "Full name",
            icon: personIcon,
        },
        {
            name: "E.g [email protected]",
            icon: envelopeIcon,
        },
        {
            name: "leave me a Message",
            icon: messageIcon,
        },
    ],
    sendbutton: "send",
    icon: paperplaneIcon,
}

export const footer = [
    {
        id: "social-media-1",
        icon: linkedInLogo,
        link: "",
    },
    {
        id: "social-media-2",
        icon: behanceLogo,
        link: "",
    },
    {
        id: "social-media-3",
        icon: githubLogo,
        link: "",
    },
    {
        id: "social-media-4",
        icon: discordLogo,
        link: "",
    },
    {
        id: "goTotop",
        icon: backtoTop,
        link: "",
    },
  ];

o aplicativo está travando e diz "Falha ao resolver a importação "../assets" de "src/constants/index.js".

está reclamando porque dentro do index.js (onde criei todos os objetos contendo texto e logos para o site) existe uma importação que não está resolvendo, o caminho para a pasta "assets" aparentemente está errado. Verifiquei a estrutura da pasta e parece correta. A pasta de ativos está no mesmo nível da pasta de componentes e constantes dentro da fonte. Preciso fazer algo extra para garantir que as imagens estão sendo importadas?

o que fiz foi colocar todos os pngs dentro desta pasta de ativos e estou apenas escrevendo a importação desta forma:

import { agile, behanceLogo, design_minded_icon, discordLogo, envelopeIcon, girlDesk3D, githubLogo, sassLogo, cssLogo, htmlLogo, javascriptLogo, linkedInLogo, messageIcon, mongodbLogo, moonIcon, multiculturalIcon, nodejsLogo, paperplaneIcon, personIcon, profile_bewerbung_foto, reactLogo,typescript_logo, paperplaneIcon, backtoTop } from "../assets"; 

os nomes fornecidos entre chaves são os nomes de cada um dos pngs