in Next Js why is index.js file is rendering 2 times giving a div twice on the website

I was trying to build a simple e-commerce website with nextjs + redux + tailwind

the problem is
In this the last 2 p tag are repeated

i think the problem is with ssr in nextjs
indexjs is rendered one time on server side and on client side too
i don’t know if getInitialProps would solve this issue.
i tried using class components in _app.js and adding getInitialProps into it
didn’t work doe.

my /index.js is like

import React from "react";
import { NavbarContainer } from "../components/Navbar/Navbar.container";
import {
  Box,
} from "@chakra-ui/react";
const Home = () => {
  return (
    <>
      <Box className="">
        <NavbarContainer/>
        <Box spacing={3} className="btmList"> iainicback</Box>
        <Box spacing={3} className="btmList"> iainicback</Box>
      </Box>
    </>
  );
};

export default Home;

my _app.js is like

import App from "next/app";
import { Provider } from "react-redux";
import { store } from "../redux";
import React from "react";
import "../styles/globals.css";
import { extendTheme } from "@chakra-ui/react";
import { Chakra } from "../styles/Chakra";

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
    200: "#384d",
  },
};

const theme = extendTheme({ colors });

const MyApp = (props) => {

    const { Component, appProps } = props
    return (
      <Provider store={store}>
        <Chakra theme={theme} cookies={appProps?.cookies}>
          <Component {...appProps} />
        </Chakra>
      </Provider>
    );
  
}

export default MyApp

this is my folder structure