Поймана SyntaxError: запрошенный модуль «/src/hoc/SectionWrapper.jsx?t=1681652963874» не предоставляет экспорт с именем «SectionWrapper» (

Я получаю эту ошибку: «Пойман SyntaxError: запрошенный модуль '/src/hoc/SectionWrapper.jsx?t=1681652963874' не предоставляет экспорт с именем 'SectionWrapper' (в About.jsx:7:10)".

У меня есть компонент с именем «About.jsx»:

import React from 'react'
import { Tilt } from 'react-tilt'
import { motion } from 'framer-motion'
import { styles } from '../styles'
import { services } from '../constants'
import { fadeIn, textVariant } from '../utils/motion'
import { SectionWrapper } from '../hoc/SectionWrapper'

const ServiceCard = ({index, icon, title}) => {
  return (
    <Tilt className = "xs:w-[250px] w-full">
      <motion.div 
        variants = {fadeIn("right", "spring", 0.5*index, 0.75)}
        className='w-full green-pink-gradient p-[1px]
        rounded-[20px] shadow-card'
      >
        <div 
          options = {{
            max: 45,
            scale: 1,
            speed: 450
          }}
          className='bg-tertiary rounded-[20px] py-5 px-12
          min-h-[280px] flex justify-evenly items-center flex-col'
        >
          <img src = {icon} alt = {title} 
          className='w-16 h-16 object-contain'/>
          <h3 className='text-white text-[20px]
          font-bold text-center'>{title}</h3>
        </div>
      </motion.div>
    </Tilt>
  )
}

const About = () => {
  return (
    <>
      <motion.div variants = {textVariant()}>
        <p className = {styles.sectionSubText}>Introduction</p>
        <h2 className = {styles.sectionHeadText}>Overview.</h2>
      </motion.div>
      <motion.p 
      variants = {fadeIn("", "", 0.1, 1)}
      className='mt-4 text-secondary text-[17px]
      max-w-3xl leading-[30px]'
      >
        I'm a skilled software developer with experience in
        TypeScript and JavaScript, and expertise in 
        frameworks like React, Node.js, and Three.js. 
        I'm a quick learner and collaborate closely with 
        clients to create efficient, scalable, and user-friendly 
        solutions that solve real-world problems. Let's work 
        together to bring your ideas to life!
      </motion.p>
      <div className = "mt-20 flex flex-wrap gap-10">
        {services.map((service, index) => {
          return <ServiceCard key = {service.title} index = {index} title = {service.title} icon = {service.icon} />
        })}

      </div>
    </>
  )
}

export default SectionWrapper(About, "about")

и у меня есть папка с именем hoc, которая содержит: компонент с именем SectionWrapper.jsx:

import { motion } from 'framer-motion'
import { styles } from "../styles"
import { staggerContainer } from "../utils/motion";

const SectionWrapper = (Component, idName) => 
        function HOC(){
            return (
                <motion.section
                variants = {staggerContainer()}
                initial = "hidden"
                whileInView = "show"
                viewport = {{ once :true, amount: 0.25 }}
                className = {`${styles.padding} max-w-7xl mx-auto
                relative z-0`}
                >
                    <Component />
                </motion.section>
            )
        }

export default SectionWrapper

и index.js в той же папке hoc:

import SectionWrapper  from "./SectionWrapper";

export default { SectionWrapper }

Я хочу сделать раздельную оболочку для всех разделов моей страницы, но это дает мне эту ошибку