My childrens components are not rendered inside my Drawer component - Material UI, React

Why when I invoke my DrawerForm(Drawer Material UI) component and add Material UI components as well as other components that exist in the project are not displayed in my DrawerForm?

My dependencies:

• react: 18.2.0
• react-dom: 18.2.0
• @amcharts/amcharts5: 5.3.6
• @mui/icons-material: 5.11.11
• @mui/material: 5.11.12

My index.js that invoke and render the components:

export const CustomMap = () => {
  const drawerWidth = "40%";
  const [showViewController, setShowViewController] = useState(false);

  const handleOpenViewController = () => setShowViewController(true)
  const handleCloseViewController = () => setShowViewController(false)

  return (
   <>
    // More components here...
    <FabForm
      position={["absolute"]}
      top="16px"
      icon="arrowLeft"
      handleClick={handleOpenViewController}
    />
    <DrawerForm
      drawerWidth={drawerWidth}
      variant={"persistent"}
      open={showViewController}
      close={handleCloseViewController}
    >
      <Box
        sx={{
          position: "relative",
          top: "130px",
        }}
      >
        <DateChart divID="chart1" />
        <DateChart divID="chart2" />
        <DateChart divID="chart3" />
      </Box>
    </DrawerForm>
   </>
  )
}

My DrawerForm component:

export const DrawerForm = ({
  drawerWidth,
  variant,
  anchor = "right",
  open,
  close,
  color = "white",
}) => {
  return (
    <Drawer
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        "& .MuiPaper-root": {
          width: drawerWidth,
          backgroundColor: color,
        },
      }}
      variant={variant}
      anchor={anchor}
      open={open}
    >
      <FabForm
        top="75px"
        icon="arrowRight"
        handleClick={close}
      />
    </Drawer>
  );
};

You need to pass the children prop. You should study how to handle props better. Here's the documentation on how to handle children: https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children.

What you're looking for is probably one of these:

export const DrawerForm = ({
drawerWidth,
variant,
anchor = "right",
open,
close,
color = "white",
children // this prop
}) => {
return (
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiPaper-root": {
width: drawerWidth,
backgroundColor: color,
},
}}
variant={variant}
anchor={anchor}
open={open}
>
<FabForm
top="75px"
icon="arrowRight"
handleClick={close}    
>
{children} {/* <- add children either here */}
</FabForm>
{children} {/* <- or here */}
</Drawer>
);
};

I'm not sure if you want it to be inside FabForm or inside Drawer. That's why I answered with both.