How can I pass the value between tag to the child component? react jsx

Question

I have jsx like this,

import TableCell from '@mui/material/TableCell';  
import TableCell from '@mui/material/TableRow';

  <TableRow>
  <TableCell sx={{minWidth:45,width:45,maxWidth:45,backgroundColor:"white"}}></TableCell>
  </TableRow>

<TableRow> is from the material ui

Now I want to enhance the TableRow like this,

const EnhancedTableRow= forwardRef((props,ref) => {
  const myDivRef = useRef();
  useImperativeHandle(ref,()=>({
    setReload: () =>{
      setReload(!reload);
    },
    getBoundingClientRect: ()=>{
      return myDivRef.current.getBoundingClientRect();
    },
    isInDiv:(x,y) =>{
      var pos = myDivRef.current.getBoundingClientRect();
      if (x >= pos.x && y >= pos.y && 
       x <= pos.x + pos.width && 
       y <= pos.y + pos.height){
          return true;
      }
      return false;
    }
  }));
  return (<div ref={myDivRef}>
    <TableRow sx={props.sx}>
        ????
      </TableRow>

  </div>)
});

So, when I use EnhancedTableRow instead of TableRow

How can I inheritance the value between tag such as <TableCell sx={{minWidth:45,width:45,maxWidth:45,backgroundColor:"white"}}></TableCell>

to the EnhancedTableRow component?

I want to put this value in ???? in EnhancedTableRow

Answer 1

Forward all the props (this includes the children prop).

<TableRow {...props} />