how to create a wrapper that changes the props for the component in react

I m trying to do something with react components for the first time and need your help,I want to wrap a component inside another one dynamically and changing its props.for example, let's say I have this component:

let's suppose I want to pass the key3 from a wrapper

Note: using React-Native with TypeScript

type Props { key1: string, key2: string, key3: any }const FirstComponent = ({ key1, key2, key3 }:Props) => {   return <View><Text>{key1} and {key2} with {key3}</Text><View/>}

wrapper example

const FirstComponentWrapper = (props:Props) => { const value = 'something';  return <FirstComponent {...props} key3={value} />}

the wrapper here lets the component have the access to the key3 value.if I have a large app with a lot of components and I can't create it each time, so I m looking for a way to create the wrapper somewhere so I can call it easily.

example :

type Props = {  component: React.ReactNode // not just function component it can be also class                              // component ;  newValue: any;}export const Wrapper = ({ component, newValue }:Props) => {  // this is what I missed  // looking to return any passed component here as in the example I mentioned with new   // value that's added to the prop}

any help? thanks in advance.