Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before.while react version 18 upgrade

Question

I have 3 index.js files in my project and I was upgrading the react version to 18. Before the changes it was somehow like this.

src/index.js

...
    ReactDoM.render(
    <React.StrictMode>
    <App />
    </React.StrictMode>
    )
...

src/pages/home

export const HomePage = props => {
    const { appData } = props

    const ShowGroupTiles = Boolean(appData.pagecontextdata?.find(data => data.contentType === "catalogBrowseGroupTiles"))
    const ShowProductTiles = Boolean(appData.pagecontextdata?.find(data => data.contentType === "catalogBrowseProducts"))
    

    const groupTiles = () => {
        document.addEventListener("DOMContentLoaded", function(event) {
            ReactDOM.render(<CatalogBrowseGroupTiles appData={appData} />, document.getElementById('group-tiles'));
          })
    }

    const productTiles = () => {
        document.addEventListener("DOMContentLoaded", function(event) {
            ReactDOM.render(<CatalogBrowseProductTiles appData={appData} />, document.getElementById('product-tiles'));
          })
    }

    return (
        <div id="catalog-browse" className="container-fluid">
            {ShowGroupTiles && groupTiles()}
            {/* <CatalogBrowseGroupTiles appData={appData} /> */}
            {ShowProductTiles && productTiles()}
            {/* <CatalogBrowseProductTiles appData={appData} /> */}
            
        </div>
    )
}

src/pages/abc/index.js

export const HsGradPage = props => {
    const { appData } = props
    const [pbData, setPbData] = useState({})
    const [giftData, setGiftData] = useState({})
    const [regaliaData, setRegaliaData] = useState({})
    const [apparelData, setApparelData] = useState({})
    const [jewelryData, setJewelryData] = useState({})
    const [AnnCardsData, setAnnCardsData] = useState({})
    const [packageGridCGData, setPackageGridCGData] = useState({})
    const [packageGridData, setPackageGridData] = useState({})
    const [annAndCardsActionUrl, setAnnCardsActionUrl] = useState("")

    const HsPackagesGrid = appData?.hsGradPageContentData?.find(data => (data.contentType === "Packages" && data.ctaCheck?.groupOsr === "PACKAGES"))
    const HsCGPackagesGrid = appData?.hsGradPageContentData?.find(data => (data.contentType === "Packages" && data.ctaCheck?.groupOsr === "REGALIA"))
    const HsGradCards = appData?.hsGradPageContentData?.find(data => data.contentType === "CatalogBrowseFeaturedProducts")
    const HsGradProducts = appData?.hsGradPageContentData?.find(data => (data.contentType === "GraduationProducts"))
    const HsGradApparel = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "APPAREL"))
    const HsGradRegalia = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "REGALIA"))
    const HsGradGifts = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "GIFTS"))
    const HsGradJewelry = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "JEWELRY"))
    const HsGradBreadcrumb = Boolean(appData?.hsGradPageContentData?.find(data => data.contentType === "Navigation"))

    const getBreadcrumb = useCallback(() => {
        ReactDOM.render(<Breadcrumb pbData={packageGridCGData ? packageGridCGData : regaliaData} />, document.getElementById('breadcrumbs'));
    }, [packageGridCGData, regaliaData])

    const getPackagesGrid = useCallback(() => {
        packageGridData?.packageItems?.length > 0 && packageGridData?.products?.length > 0 &&
        ReactDOM.render(<GradPackageTable packageList={packageGridData?.packageItems} productList={packageGridData?.products} pageContentData={HsPackagesGrid} />, document.getElementById('grad-packages-grid'));
    }, [HsPackagesGrid, packageGridData])

    const getCGPackagesGrid = useCallback(() => {
        packageGridCGData?.packageItems?.length > 0 && packageGridCGData?.products?.length > 0 &&
        ReactDOM.render(<GradPackageTable packageList={packageGridCGData?.packageItems} productList={[...packageGridCGData?.products?.filter((obj => obj.productType === HsCGPackagesGrid?.ctaCheck?.productType))]} pageContentData={HsCGPackagesGrid} />, document.getElementById('packages-grid'));
    }, [HsCGPackagesGrid, packageGridCGData])

    const getPackagesTile = useCallback(() => {
        ReactDOM.render(<GradPackagesTile tileData={pbData} hsGradProducts={HsGradProducts} />, document.getElementById('packages-tile'));
    }, [pbData, HsGradProducts])

    const getProductTile = useCallback((tileData, divId) => {
        ReactDOM.render(<GradProductTiles tileData={tileData} />, document.getElementById(`${divId}`));
    }, [])

    const getAnnCardsTile = useCallback((tileData, pageContent, divId) => {
        ReactDOM.render(<GradAnnCardsTiles tileData={tileData} pageContent={pageContent} shopAllUrl={annAndCardsActionUrl} />, document.getElementById(`${divId}`));
    }, [annAndCardsActionUrl])

    useEffect(() => {
        Object.keys(appData.hsGradServiceData).map((key) => {
            if (key !== "metaData") {
                appData.hsGradServiceData[key]?.productGroups && Object.keys(appData.hsGradServiceData[key]?.productGroups).map((catObj) => {
                    setPbData(appData.hsGradServiceData[key]?.productGroups)
                    const groupData = { ...appData.hsGradServiceData[key].productGroups[catObj] }
                    if (groupData.groupOsr === HsGradGifts.ctaCheck.groupOsr) {
                        setGiftData(groupData)
                    } else if (groupData.groupOsr === HsCGPackagesGrid?.ctaCheck?.groupOsr) {
                        const regaliaTileData = { ...groupData }
                        regaliaTileData.products = regaliaTileData.products.filter((obj => obj.productType !== "PACKAGE"))
                        if (groupData.groupType === "PACKAGES") {
                            setPackageGridCGData(groupData)
                            setRegaliaData(regaliaTileData)
                        } else if (groupData.groupOsr === HsGradRegalia?.ctaCheck?.groupOsr) {
                            setRegaliaData(regaliaTileData)
                        }
                    } else if (groupData.groupOsr === HsPackagesGrid?.ctaCheck?.groupOsr && groupData.groupType === "PACKAGES") {
                        setPackageGridData(groupData)
                    } else if (groupData.groupOsr === HsGradApparel?.ctaCheck?.groupOsr) {
                        setApparelData(groupData)
                    } else if (groupData.groupOsr === HsGradJewelry?.ctaCheck?.groupOsr) {
                        setJewelryData(groupData)
                    }
                    return true
                })
            }
            return true
        })
    }, [appData.hsGradServiceData, HsGradJewelry, HsGradApparel, HsGradRegalia, HsCGPackagesGrid, HsGradGifts, HsPackagesGrid])

    useEffect(() => {
        const cardGroups = []
        HsGradCards && Object.keys(HsGradCards)?.length > 0 && HsGradCards.featuredProducts?.length > 0 &&
            HsGradCards.featuredProducts.sort((a, b) => a.ordersequence - b.ordersequence).map((ctaData) =>
                pbData && Object.keys(pbData).map((catObj) => {
                    if (pbData[catObj]?.groupOsr === ctaData.groupOsr) {
                        if (ctaData.productOsr) {
                            setAnnCardsActionUrl(pbData[catObj]?.actionUrl)
                            pbData[catObj]?.products?.length > 0 && pbData[catObj]?.products.map((productObj) => {
                                const regexValue = new RegExp(ctaData.productOsr)
                                if (regexValue.test(productObj.productOsr)) {
                                    cardGroups.push(productObj)
                                }
                                return true
                            })
                        } else {
                            cardGroups.push(pbData[catObj])
                        }
                    }
                    return true
                })
            )
        setAnnCardsData(cardGroups)
    }, [pbData, HsGradCards])

    return (
        <>

            {
                HsGradBreadcrumb && packageGridCGData && Object.keys(packageGridCGData)?.length > 0 && getBreadcrumb()
            }
            {
                HsPackagesGrid && packageGridData && Object.keys(packageGridData)?.length > 0 && getPackagesGrid()
            }
            {
                HsCGPackagesGrid && packageGridCGData && Object.keys(packageGridCGData)?.length > 0 && getCGPackagesGrid()
            }
            {
                pbData && Object.keys(pbData)?.length > 0 && HsGradProducts && getPackagesTile()
            }
            {
                HsGradRegalia && regaliaData && Object.keys(regaliaData)?.length > 0 && getProductTile(regaliaData, "regalia")
            }
            {
                HsGradCards && Object.keys(HsGradCards)?.length > 0 && AnnCardsData && Object.keys(AnnCardsData)?.length > 0 && getAnnCardsTile(AnnCardsData, HsGradCards, "cards")
            }
            {
                HsGradApparel && apparelData && Object.keys(apparelData)?.length > 0 && getProductTile(apparelData, "apparel")
            }
            {
                HsGradJewelry && jewelryData && Object.keys(jewelryData)?.length > 0 && getProductTile(jewelryData, "jewelry")
            }
            {
                HsGradGifts && giftData && Object.keys(giftData)?.length > 0 && getProductTile(giftData, "gifts")
            }
        </>
    )
}

As per the upgrade to version 18 of react, in every instance I replaced ReactDOM.render with root = createElement(document.getElementById('example-root)) and root.render()

And now I am getting the warning in the browser like

Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it. at HsGradPage (http://localhost:3002/main.63a688d646c69f962f97.hot-update.js:44:5) at Route (http://localhost:3002/static/js/bundle.js:56780:29) at Switch (http://localhost:3002/static/js/bundle.js:56982:29) at Router (http://localhost:3002/static/js/bundle.js:56411:30) at BrowserRouter (http://localhost:3002/static/js/bundle.js:56032:35) at App

I don't know if it's happening due to useCallback hook and if it's so. What is solution?

sample index.js

import React, { useEffect, useState, useCallback } from 'react'
import { createRoot } from 'react-dom/client';
import { Breadcrumb } from '../breadcrumb'
import GradProductTiles from './gradProductTiles'
import GradPackageTable from './gradPackageTable'
import GradPackagesTile from './gradPackagesTile'
import GradAnnCardsTiles from './gradGroupsAndProducts'

export const HsGradPage = props => {
    const { appData } = props
    const [pbData, setPbData] = useState({})
    const [giftData, setGiftData] = useState({})
    const [regaliaData, setRegaliaData] = useState({})
    const [apparelData, setApparelData] = useState({})
    const [jewelryData, setJewelryData] = useState({})
    const [AnnCardsData, setAnnCardsData] = useState({})
    const [packageGridCGData, setPackageGridCGData] = useState({})
    const [packageGridData, setPackageGridData] = useState({})
    const [annAndCardsActionUrl, setAnnCardsActionUrl] = useState("")

    const HsPackagesGrid = appData?.hsGradPageContentData?.find(data => (data.contentType === "Packages" && data.ctaCheck?.groupOsr === "PACKAGES"))
    const HsCGPackagesGrid = appData?.hsGradPageContentData?.find(data => (data.contentType === "Packages" && data.ctaCheck?.groupOsr === "REGALIA"))
    const HsGradCards = appData?.hsGradPageContentData?.find(data => data.contentType === "CatalogBrowseFeaturedProducts")
    const HsGradProducts = appData?.hsGradPageContentData?.find(data => (data.contentType === "GraduationProducts"))
    const HsGradApparel = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "APPAREL"))
    const HsGradRegalia = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "REGALIA"))
    const HsGradGifts = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "GIFTS"))
    const HsGradJewelry = appData?.hsGradPageContentData?.find(data => (data.contentType === "ProductBrowseProducts" && data.ctaCheck?.groupOsr === "JEWELRY"))
    const HsGradBreadcrumb = Boolean(appData?.hsGradPageContentData?.find(data => data.contentType === "Navigation"))

    const getBreadcrumb = useCallback(() => {
        const root1a = createRoot(document.getElementById('breadcrumbs'));
        root1a.render(<Breadcrumb pbData={packageGridCGData ? packageGridCGData : regaliaData} />);
    }, [packageGridCGData, regaliaData])

    const getPackagesGrid = useCallback(() => {
        const root2 = createRoot(document.getElementById('grad-packages-grid'));
        packageGridData?.packageItems?.length > 0 && packageGridData?.products?.length > 0 &&
        root2.render(<GradPackageTable packageList={packageGridData?.packageItems} productList={packageGridData?.products} pageContentData={HsPackagesGrid} />);
    }, [HsPackagesGrid, packageGridData])

    const getCGPackagesGrid = useCallback(() => {
        const root3 = createRoot(document.getElementById('packages-grid'));
        packageGridCGData?.packageItems?.length > 0 && packageGridCGData?.products?.length > 0 &&
        root3.render(<GradPackageTable packageList={packageGridCGData?.packageItems} productList={[...packageGridCGData?.products?.filter((obj => obj.productType === HsCGPackagesGrid?.ctaCheck?.productType))]} pageContentData={HsCGPackagesGrid} />);
    }, [HsCGPackagesGrid, packageGridCGData])

    const getPackagesTile = useCallback(() => {
        const root4 = createRoot(document.getElementById('packages-tile'));
        root4.render(<GradPackagesTile tileData={pbData} hsGradProducts={HsGradProducts} />);
    }, [pbData, HsGradProducts])

    const getProductTile = useCallback((tileData, divId) => {
        const root5 = createRoot(document.getElementById(`${divId}`));
        root5.render(<GradProductTiles tileData={tileData} />);
    }, [])

    const getAnnCardsTile = useCallback((tileData, pageContent, divId) => {
        const root6 = createRoot(document.getElementById(`${divId}`));
        root6.render(<GradAnnCardsTiles tileData={tileData} pageContent={pageContent} shopAllUrl={annAndCardsActionUrl} />);
    }, [annAndCardsActionUrl])

    useEffect(() => {
        Object.keys(appData.hsGradServiceData).map((key) => {
            if (key !== "metaData") {
                appData.hsGradServiceData[key]?.productGroups && Object.keys(appData.hsGradServiceData[key]?.productGroups).map((catObj) => {
                    setPbData(appData.hsGradServiceData[key]?.productGroups)
                    const groupData = { ...appData.hsGradServiceData[key].productGroups[catObj] }
                    if (groupData.groupOsr === HsGradGifts.ctaCheck.groupOsr) {
                        setGiftData(groupData)
                    } else if (groupData.groupOsr === HsCGPackagesGrid?.ctaCheck?.groupOsr) {
                        const regaliaTileData = { ...groupData }
                        regaliaTileData.products = regaliaTileData.products.filter((obj => obj.productType !== "PACKAGE"))
                        if (groupData.groupType === "PACKAGES") {
                            setPackageGridCGData(groupData)
                            setRegaliaData(regaliaTileData)
                        } else if (groupData.groupOsr === HsGradRegalia?.ctaCheck?.groupOsr) {
                            setRegaliaData(regaliaTileData)
                        }
                    } else if (groupData.groupOsr === HsPackagesGrid?.ctaCheck?.groupOsr && groupData.groupType === "PACKAGES") {
                        setPackageGridData(groupData)
                    } else if (groupData.groupOsr === HsGradApparel?.ctaCheck?.groupOsr) {
                        setApparelData(groupData)
                    } else if (groupData.groupOsr === HsGradJewelry?.ctaCheck?.groupOsr) {
                        setJewelryData(groupData)
                    }
                    return true
                })
            }
            return true
        })
    }, [appData.hsGradServiceData, HsGradJewelry, HsGradApparel, HsGradRegalia, HsCGPackagesGrid, HsGradGifts, HsPackagesGrid])

    useEffect(() => {
        const cardGroups = []
        HsGradCards && Object.keys(HsGradCards)?.length > 0 && HsGradCards.featuredProducts?.length > 0 &&
            HsGradCards.featuredProducts.sort((a, b) => a.ordersequence - b.ordersequence).map((ctaData) =>
                pbData && Object.keys(pbData).map((catObj) => {
                    if (pbData[catObj]?.groupOsr === ctaData.groupOsr) {
                        if (ctaData.productOsr) {
                            setAnnCardsActionUrl(pbData[catObj]?.actionUrl)
                            pbData[catObj]?.products?.length > 0 && pbData[catObj]?.products.map((productObj) => {
                                const regexValue = new RegExp(ctaData.productOsr)
                                if (regexValue.test(productObj.productOsr)) {
                                    cardGroups.push(productObj)
                                }
                                return true
                            })
                        } else {
                            cardGroups.push(pbData[catObj])
                        }
                    }
                    return true
                })
            )
        setAnnCardsData(cardGroups)
    }, [pbData, HsGradCards])

    return (
        <>

            {
                HsGradBreadcrumb && packageGridCGData && Object.keys(packageGridCGData)?.length > 0 && getBreadcrumb()
            }
            {
                HsPackagesGrid && packageGridData && Object.keys(packageGridData)?.length > 0 && getPackagesGrid()
            }
            {
                HsCGPackagesGrid && packageGridCGData && Object.keys(packageGridCGData)?.length > 0 && getCGPackagesGrid()
            }
            {
                pbData && Object.keys(pbData)?.length > 0 && HsGradProducts && getPackagesTile()
            }
            {
                HsGradRegalia && regaliaData && Object.keys(regaliaData)?.length > 0 && getProductTile(regaliaData, "regalia")
            }
            {
                HsGradCards && Object.keys(HsGradCards)?.length > 0 && AnnCardsData && Object.keys(AnnCardsData)?.length > 0 && getAnnCardsTile(AnnCardsData, HsGradCards, "cards")
            }
            {
                HsGradApparel && apparelData && Object.keys(apparelData)?.length > 0 && getProductTile(apparelData, "apparel")
            }
            {
                HsGradJewelry && jewelryData && Object.keys(jewelryData)?.length > 0 && getProductTile(jewelryData, "jewelry")
            }
            {
                HsGradGifts && giftData && Object.keys(giftData)?.length > 0 && getProductTile(giftData, "gifts")
            }
        </>
    )
}