Calling a function from another hooked component with ref/forwardRef - reactjs

Question

I'm trying to call a function from another component, with the old fashion react Class style I was able to do it easily, since I'm trying to hooked everything I'm facing this kind of issue
This code doesn't work when we call setText() using the reference :
export function MyComp(props, ref) {
const [theText, setText] = useState(props.theText);
return (
<div>
<h1>{theText}</h1>
<button
onClick={e => {
setText("clicked with inside button");
}}
>
inside button
</button>
<button
onClick={e => {
setText("not clicked");
}}
>
reinit
</button>
</div>
);
}
export const MyRefComp = React.forwardRef((props, ref) => (
<MyComp ref={ref} {...props}>
{props.children}
</MyComp>
));
function App() {
const compref = useRef();
return (
<div>
<MyRefComp ref={compref} theText="not clicked" />
<button
onClick={e => {
compref.current.setText("clicked with outside button");
}}
>
outside button
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
here is the editable code : https://codesandbox.io/s/reactforwardrefproblem-ublk0
Thanks for helping

Answer 1

Here is the answer to your question, but i don't think it's a good pattern to do like this.
You need explain what are you trying to do, so we can help you. I assume context or HOC is what you needed.
Working example.

Answer 2

Thanks #RTW,
It's incredible how many combinaisons I tried and I didn't manange to do it.
Context or HOC won't fit in my case.
I've also simplified it to avoid the intermediaite component, and allow multiple calls with an object that contains the func.
here is it :
const MyComp = React.forwardRef((props, ref) => {
const [theText, setText] = useState(props.theText);
ref.current = { setText: setText };
return (
<div>
<h1>{theText}</h1>
<button
onClick={e => {
setText("clicked with inside button");
}}
>
inside button
</button>
<button
onClick={e => {
setText("not clicked");
}}
>
reinit
</button>
</div>
);
});
function App() {
let compref = useRef();
return (
<div>
<MyComp ref={compref} theText="not clicked" />
<button
onClick={e => {
compref.current.setText("clicked with outside button");
}}
>
outside button
</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
https://codesandbox.io/s/react-example-x194f