How to call Parent containers function from child component in Reactjs

My application renders dynamic tiles by user and the tiles need to be re-arranged based on external configuration, StyleWrapper need to be a common container component that can be used in other projects too. Following is our UI component structure:

<StyleWrapper>
 <Header />
 <Content>
  <PortletTiles />
 </Content>
</StyleWrapper>

Given above structure, I have a function in StyleWrapper.tsx called arrangeTiles() which arranges tiles based on external configuration.

My question is how to call arrangeTiles() function from child component PortletTiles.tsx

StyleWrapper.tsx --> Parent Wrapper Container component

function StyleWrapper(props:any) {
  let arrangeTiles= () => {  
    // Arrange Tile logic
  };
  return (
    <div id="cnplStyleWrapper">
        {props.children}
    </div>
  );
}

export default StyleWrapper;

PortletTiles.tsx --> Child component

function PortletTiles(props:any) {
  let addNewTile= () => {  
    // Some logic to render tile here.. then 
    // How to call parent container's arrangeTiles function?
  };
  return (
    <div>
        <button onClick={addNewTile}>Add Tile</button>
    </div>
  );
}
export default PortletTiles;

You can create a context and pass the function or any other props as value. useContext can be used to consume the passed value from the provider.

type ContextValue = {
  arrangeTiles: () => void;
};

const Context = createContext<ContextValue>({
  arrangeTiles: () => {}
});

const StyleWrapper: FC = (props) => {
  let arrangeTiles = () => {
    // Arrange Tile logic
    alert("Tiles have been arranged!");
  };
  return (
    <Context.Provider value={{ arrangeTiles }}>
      <div id="cnplStyleWrapper">{props.children}</div>
    </Context.Provider>
  );
};

const PortletTiles: FC = (props) => {
  const { arrangeTiles } = useContext(Context);

  let addNewTile = () => {
    arrangeTiles();
  };
  return (
    <div>
      <button onClick={addNewTile}>Add Tile</button>
    </div>
  );
};

export default function App() {
  return (
    <StyleWrapper>
      <PortletTiles />
    </StyleWrapper>
  );
}

If your app already uses redux, then you can move arrangeTiles to the reducer and dispatch actions from the components.