尝试在 React Js 中创建轮播，但函数显示为未定义 no-undef

Question

我正在尝试创建一个每 3 秒有三个循环背景图像的 div。现在，当我编写代码时，它向我显示了一个错误，显示 Line 13:3: 'startCarousel' is not defined no-undef 第 17:1 行：'startCarousel' 未定义 no-undef。 start Carrousel 是函数的名称，以前我在另一个项目中使用过相同的代码，但仅通过 Vanilla JS。我是不是忘记发帖了？我的代码在下面

import React from 'react'
import '../styles/Main.scss'
import GirlsWriting from '../assets/girls-writing.webp'
import KidsLearning from '../assets/kids-group-learning.jpg'
import KidsWorking from '../assets/kids-working.jpg';

const Main = () => {


    const images = [{ GirlsWriting }, { KidsLearning }, { KidsWorking }]
    const goodCitizens = document.querySelector('.good-citizens');
    const interval = setInterval(function () {
        startCarousel();
    }, 3000);
    var index = 1;

    startCarousel = () => {
        goodCitizens.style.backgroundImage = `url(${images[index++]})`;
        goodCitizens.classList.remove('carousel');
        void goodCitizens.offsetWidth;
        goodCitizens.classList.add('carousel');
        if (index > images.length - 1) index = 0;
    };


return(
    <main>
        <div className='good-citizens carousel'>

        </div>

    </main>

)