How to override react component?

Question

React

There is a SPA on react/redux. There is a Brands component. The Media component is similar to it, but receives data from another Ajax request. I'm trying to inherit from Brands, but for some reason componentDidMount in Media is launched from Brands. How to do it right?

class Media extends Brands {
  loadData = async () => {
    alert('sdfdf'); // не выводится
    const { dispatch, dataList, clientId } = this.props;
    if (!dataList && clientId) {
      dispatch(mainLoaderActions.addBlockingRequest("loadMedia"));

      const res = await mediaApi.getBrandsData(clientId);

      dispatch(dataActions.setBrandsList(res));
      dispatch(mainLoaderActions.deleteBlockingRequest("loadMedia"));
    }
  };

  componentDidMount() {
    alert('aaa'); // не выводится
    this.loadData();
  }

  render() {

Answer 1

The problem is not entirely clear. Here is a sandbox example.
There is a Main component that has a render method and a Second component that inherits from Main. ComponentDidMount is called from Second and render is from Main