I'm trying to modify a child component existing within a function component.

Let's say this is the original Table function component I would like to render in my own CustomizedTable function component. Since the Table function component is beautifully designed, I don't want to modify the entire function or structure. What I hope to achieve is to customize and replace the existing Body component

const Table = (props) => {
  return (
    <Context props={props}>
      <Container className={props.className} style={props.style}>
          <Header />
          <Body
              ColumnComponents={ColumnData}
              RowComponents={RowData}
          />
          <Footer />
      </Container>
    </Context>
  );
});

How do I find and replace the <Body/> component with <CustomizedBody> that is nested within the Table function component? Is there a way to modify it without touching the existing <Body>?

   import { Table } from './Table';


   const CustomizedBody = (props) => {
   return (
      <Body>
      // Body Add Ons
      </Body>
   )}

   export const CustomizedTable = (props) => { 
    
   return (
       <Table Body={<CustomizedBody>}>
       </Table>
   )}