When returninh component, props in a next.js react webpage it shows 404

Question

I'm making my own chat app with react.js, next.js and firebase For some reason everything worked perfectly until i returned component and props in the main script

This is the code for _app.js:

import { ChakraProvider } from "@chakra-ui/react"
import Login from "../components/Login"
import Sidebar from "../components/Sidebar"

function MyApp({ Component, pageProps }) {
  //return <Component {...pageProps} />

  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

And this is the code for Sidebar.js:

import { Flex, Text } from "@chakra-ui/layout";
import { Button } from "@chakra-ui/react";
import { Avatar } from "@chakra-ui/avatar";
import { IconButton } from "@chakra-ui/button";
import { ArrowLeftIcon } from "@chakra-ui/icons";

const Chat = () => {
    <Flex p={3} align="center" _hover={{bg: "gray.100", cursor: "pointer"}}>
        <Avatar src="" marginEnd={3} />
        <Text>[email protected]</Text>
    </Flex>
};

export default function Sidebar() {
    return (
        <Flex
            //bg="blue.100"
            w="300px"
            h="100vh"
            borderEnd="1px solid" borderColor="gray.200"
            direction="column"
        >

            <Flex
                //bg="red.100"
                h="81px" w="100%"
                align="center"
                justifyContent="space-between"
                borderBottom="1px solid" borderColor="gray.200"
                p={3}
                _hover={{bg: "gray.100", cursor: "pointer"}}
            >

                <Flex align="center">
                    <Avatar src="" marginEnd={3} />
                    <Text>MadeOf0s</Text>
                </Flex>

                <IconButton size="sm" isRound icon={<ArrowLeftIcon />} />

            </Flex>

            <Button m={5} p={4}>New Chat</Button>

            <Flex overflowX="scroll" direction="column" sx={{scrollbarWidth: "none"}}>
                <Flex p={3} align="center" _hover={{bg: "gray.100", cursor: "pointer"}}>
                    <Avatar src="" marginEnd={3} />
                    <Text>[email protected]</Text>
                </Flex>
                <Chat />
            </Flex>

        </Flex>
    )
}

It works perfectly fine when I take out the <Component {...pageProps} /> But I need that in there