Javascript – Rendering Child in Child

Im trying to solve, which should be a relatively straight forward issue. I am trying to render a component in the following page. I defined a layout for all children under dashboard. Im not sure if another layout needs to be defined to display within the child of dashboard. At the moment the component appears on the left side where Sidebar has previously been set

app/
├── context/
├── firebase/
├── mobile/
├── portal/
│   ├── components/
│   │   ├── AddGroup.jsx ** THIS COMPONENT **
│   │   └── Sidebar.jsx
│   └── dashboard/
│       ├── groups/
│       │   └── page.jsx ** SHOW COMPONENT HERE **
│       ├── individuals/
│       ├── settings/
│       ├── statistics/
│       ├── layout.jsx
│       └── page.jsx
├── login/
├── utils/
├── dummydata.ts
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

All help appreciated

Layout of dashboard/layout

import Sidebar from '../components/Sidebar';

const DashboardLayout = ({ children }) => {
    return (
        <div className="min-w-screen min-h-screen bg-gray-200 m-10 flex">
            <div className="w-1/4 p-4">
                <Sidebar/>
            </div>
            <div className='flex-1 flex flex-col'>
                {children}
            </div>
        </div>
    );
};

export default DashboardLayout;

Component: AddGroup

import React, { useState } from 'react';
import { Dialog, DialogHeader, DialogBody, DialogFooter, Button, Input } from "@material-tailwind/react";

const AddGroup = ({ open, handleOpen }) => {
  return (
    <Dialog open={open} handler={handleOpen}>
      <DialogHeader>Create a Travel Group</DialogHeader>
      <DialogBody>
        <div className="">
          <Input type="text" label="Group Name" />
          <Input type="text" label="Destination" />
          <Input type="date" label="Date" />
          <Input type="number" label="Number of Participants" />
        </div>
      </DialogBody>
      <DialogFooter>
        <Button variant="text" color="red" onClick={handleOpen}>
          Cancel
        </Button>
        <Button variant="gradient" color="green" onClick={() => { /* Add logic to handle form submission */ }}>
          Create
        </Button>
      </DialogFooter>
    </Dialog>
  );
};

export default AddGroup;

Desired location to display aboev component

'use client'
import React, {useState} from 'react';
import { Button } from "@material-tailwind/react";
import { PlusIcon } from "@heroicons/react/24/solid";
import AddGroup from '../../components/AddGroup'

const Groups = () => {

  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(!open);


  return (
    <div className='flex-1 text-gray-800 flex flex-col'>
      <AddGroup open={open} handleOpen={handleOpen} />
      <div className='flex-row flex items-center justify-between'>
        <div className='text-4xl font-medium ml-5 mt-10'>Groups</div>
        <div className='mr-10 mt-10'>
          <Button onClick={(handleOpen)} autoCapitalize='false' size="lg" color="white" className="flex items-center gap-3 font-normal normal-case">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
          </svg>
            Add Group
          </Button>
        </div>
      </div>
      <div className='flex-1 flex justify-center items-center text-gray-500'>
        No groups created
      </div>
      <AddGroup open={open} handleOpen={handleOpen}/>
    </div>
  )
}

export default Groups;