How to use different Context on same Component (reactjs) - reactjs

Question

I want to use different context in a common component.
There are 2 providers and 1 common component.
The common component uses different data, and 2 providers have each data indivisually.
e.g.
const useMyProvider1 = () {
return useContext(MyContext1)
}
const MyProvider1 = ({children}) => {
const [data1, setData1] = useState(initial1)
return <MyContext1.Provider value={[data1, setData1]}>{children}</MyContext1.Provider>
}
const useMyProvider2 = () {
return useContext(MyContext2)
}
const MyProvider2 = ({children}) => {
const [data2, setData2] = useState(initial2)
return <MyContext2.Provider value={[data2, setData2]}>{children}</MyContext2.Provider>
}
const Component1 = () => {
return (
<MyProvider1>
<CommonComponent /> // CommonComponent uses data1
</MyProvider1>
)
}
const Component2 = () => {
return (
<MyProvider2>
<CommonComponent /> // Same component but this uses data2
</MyProvider2>
)
}
const CommonComponent = () => {
const {data, setData} = /* I want to use only one provider useMyProvider1 or useMyProvider2 depends on wrapped provider */
return (
<div>this is one of {data}</div>
)
}
It is an idea but not good I think, because CommonComponent depends on each providers.
I want to depend on only wrapped provider.
const CommonComponent = ({providerType}) => {
const {data, setData} = providerType === 'type1' ? useMyProvider1() : useMyProvider2()
return (
<div>this is one of {data}</div>
)
}
Is there any good solutions?