forwording ref through a custom component

i have this code

import MuiDialog from "@mui/material/Dialog";
import { styled } from "@mui/material/styles";
const TheDialog = styled((DialogProps) => (
  <MuiDialog  {...DialogProps} />
))(({ theme }) => ({
 "& .css-tlc64q-MuiPaper-root-MuiDialog-paper": {
 
       background: "linear-gradient(90deg, rgb(142, 31, 195) 0%, rgb(6, 111, 197) 100%)",
       color:"white"
  },
  "& .css-tlc64q-MuiPaper-root-MuiDialog-paper *": {
   
       color:"white"
  },
  "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button *": {
    
      
       color:"black"
  },
   "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button": {
  
      
      alignItems: "center",
      background: "#FFFFFF",
      border: "1px solid rgba(0, 0, 0, 0.1)",
      borderRadius: ".25rem",
      boxShadow: "rgba(0, 0, 0, 0.02) 0 1px 3px 0",
      boxSizing: "border-box",
      color: "rgba(0, 0, 0, 0.85)",
      cursor: "pointer",
      fontFamily: "system-ui,-apple-system,system-ui,Helvetica Neue,Helvetica,Arial,sans-serif",
      fontSize: "13px",
      fontWeight: "600",
      textDecoration: "none",
      transition: "all 250ms",
      userSelect: "none",
      webkitUserSelect: "none",
      touchAction: "manipulation",
  },
   "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:hover": {
  
      
       transform: "translateY(-1px)"
  },
  "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:focus": {
   
      
      borderColor: "rgba(0, 0, 0, 0.15)",
      boxShadow: "rgba(0, 0, 0, 0.1) 0 4px 12px",
      color: "rgba(0, 0, 0, 0.65)"
  },
   "& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:active": {
   
      
      backgroundColor: "#F0F0F1",
      borderColor: "rgba(0, 0, 0, 0.15)",
      boxShadow: "rgba(0, 0, 0, 0.06) 0 2px 4px",
      color: "rgba(0, 0, 0, 0.65)",
      transform: "translateY(0)"
  },


  
}));
function Dialog({handleClose,open,children}){

  return( <TheDialog
    onClose={handleClose}
    fullWidth={true}
    maxWidth={"sm"}
    open={open}
  >
      {children}
  </TheDialog>)
 
}

function App() {
  const textAreaRef = React.useRef(null);

  const handleClick = () => {
    console.log(textAreaRef.current.value);
  };

  return (
    <div className="App"
       open={true}
       handleClose={()=>{}}
       title="My Dialog">
      <Dialog title="My Dialog">
        <textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
        <button onClick={handleClick}>Click me</button>
      </Dialog>
    </div>
  );
}

export default App;

For some reason the ref gives me null.

It doesn’t give me null if I put the text area outside Dialog like so:

function App() {
  const textAreaRef = React.useRef(null);

  const handleClick = () => {
    console.log(textAreaRef.current.value);
  };

  return (
    <div className="App">
      <textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
      <Dialog
       open={true}
       handleClose={()=>{}}
       title="My Dialog">
        <button onClick={handleClick}>Click me</button>
      </Dialog>
    </div>
  );
}

so I’m pretty sure the error has something to do with passing refs, although I don’t know how to use it with a custom component that has opening and closing tags

I searched the internet and even tried chatgpt and couldn’t find an answer so yall are my last resort lol

Thanks!!