React: Calling a child component's function when a tab is clicked

I am trying to create a React app that has two tabs(Tab1, Tab2) and when you click on Tab2, a message saying 'Function A is called' will appear in the console.

But it does not work with the following code.
The tabs works fine but no message on the console.
How can I solve it?

App.js

import MyComponent from './MyComponent';
import React from 'react';
import './App.css';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

function App() {
  function handleTabSelect(index, last) {
    if (index === 1 && myComponentRef.current) {
      myComponentRef.current.funcA();
    }
  }

  const myComponentRef = React.useRef();

  return (
    <div className="App">
      <Tabs onSelect={handleTabSelect}>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
        </TabList>

        <TabPanel>
          HelloWorld123
        </TabPanel>
        <TabPanel>
          <MyComponent ref={myComponentRef} />
        </TabPanel>
      </Tabs>
    </div>
  );
}


export default App;

MyComponent.jsx as a child component.

import React from 'react';

const MyComponent = React.forwardRef((props, ref) => {
  function funcA() {
    console.log('Function A is called');
    myRef.current && myRef.current.focus();
  }

  // Save the ref to the DOM node you want to reference
  const myRef = React.useRef(null);
  React.useImperativeHandle(ref, () => ({
    funcA: funcA
  }));

  return (
    <div>
      <p ref={myRef}>This is a message for Tab 2</p>
    </div>
  );
});

export default MyComponent;

Because of conditional render, TabPanel-2 can't forward anything to parent component. see here. https://beta.reactjs.org/reference/react/forwardRef#my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null

At least two ways to call funcA.

1. call funcA by setTimeout in handleTabSelect;While TabPanel Has render to display in this render ,setTimeout will get the current target instead of null.

 setTimeout(() => {
  if (index === 1 && myComponentRef.current) {
    myComponentRef.current.funcA();
  }
}, 0);

2. send a prop to TabPanel-2 and use Effect to watch and call funcA.

const [index, setIndex] = useState(0)
function handleTabSelect(index, last) {
  setIndex(index)
}

<MyComponent index={index}  />

useEffect(() => {
  if(props.index===1){
    funcA();
  }
}, [props.index])