Open a specific Tab in one component on button click from an external Component

I have a HomePage component which has a child component Platform. In the Platform component there are some links, on clicking these links it should open a new tab in browser and that will open a specific tab which is in another component PlatformFeatures. In the PlatformFeatures component there is a Tab component where each tab will have unique tab number or index and url. This url will be same as those url of the links in the Platform component (I guess). The thing is I will click on a link from Platform component and it will open the specific tab with that link of the Tab component which is in the PlatformFeatures component.This will open in a new tab of the browser and the browser URL will have the link of the specific tab maybe added as a hash after the actual link. So that the unique link can be shared with anyone and if the url is pasted in the browser it will open the specific Tab of the tab Component. Here is my code of HomePage Component:

import React from 'react';
import PropTypes from 'prop-types';
import Platform from './Platform';

const HomePage = ({ additionalProps }) => {
  const { routes } = additionalProps;

  return (
    <div className="homepage">
      <Platform routes={routes} />
    </div>
  );
};

HomePage.defaultProps = {
  additionalProps: PropTypes.shape({
    routes: null,
  }),
};

HomePage.propTypes = {
  additionalProps: PropTypes.shape({
    routes: PropTypes.shape({
      features: {
        platform: PropTypes.string,
      },
  }),
};

export default HomePage;

Here is Platform Component:

    import React from 'react';
    import PropTypes from 'prop-types';
    import { I18nText } from '@wtag/react-comp-lib';
    import profile from 'affiliateImages/person-24px.svg';
    import search from 'affiliateImages/search-24px.svg';
    import booking from 'affiliateImages/flight-24px.svg';
    
    const Platform = () => {
    
      const features = [
        {
          id: 0,
          icon: profile,
          name: <I18nText id="homepage.features.profiles.title" />,
          description: <I18nText id="homepage.features.profiles.description" />,
          link: linkToFeatures1,
        },
        {
          id: 1,
          icon: search,
          name: <I18nText id="homepage.features.search.title" />,
          description: <I18nText id="homepage.features.search.description" />,
          link: linkToFeatures2,
        },
        {
          id: 2,
          icon: booking,
          name: <I18nText id="homepage.features.booking.title" />,
          description: <I18nText id="homepage.features.booking.description" />,
          link: linkToFeatures3,
        },
      ];
    
      return (
        <div className="homepage__platform-section">
          <div className="container">
            <div className="homepage__platform-section-header">
              <I18nText id="homepage.features.header.title" />
            </div>
            <div className="grid">
              {features.map(({ icon, name, description, link, id }) => (
                <div
                  className="col-xlg-4 col-lg-4 col-md-6 col-sm-6 col-xs-12 col-xxs-12"
                  key={id}
                >
                  <div>
                    <span>
                      <img
                        src={icon}
                        alt="icon"
                        className="homepage__platform-section-icon"
                      />
                    </span>
                    <span className="homepage__platform-section-name">{name}</span>
                  </div>
                  <div className="homepage__platform-section-description">
                    {description}
                  </div>
                  <div>
                    <a href={link} className="homepage__platform-section-link">
                      <I18nText id="homepage.features.read.link" />
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    };
    
    export default Platform;

Here is PlatformFeatures Component

import React from 'react';
import { RTabs, I18nText } from '@wtag/react-comp-lib';
import Profiles from './Profiles';
import Search from './Search';
import Booking from './Booking';

const features = [
  {
    tabNum: 0,
    title: (
      <I18nText
        id="features.platform.profiles"
        className="platform-features__profiles-tab"
      />
    ),
    content: <Profiles />,
  },
  {
    tabNum: 1,
    title: (
      <I18nText
        id="features.platform.search"
        className="platform-features__search-tab"
      />
    ),
    content: <Search />,
  },
  {
    tabNum: 2,
    title: (
      <I18nText
        id="features.platform.booking"
        className="platform-features__booking-tab"
      />
    ),
    content: <Booking />,
  },
];

const getItems = () => {
  return features.map(({ title, content }, index) => ({
    key: index,
    title,
    content,
  }));
};

const PlatformFeatures = () => {
  return (
    <div className="platform-features__tabs">
      <RTabs isVertical={true} items={getItems()} selectedTabKey={2} />
    </div>
  );
};

export default PlatformFeatures;

The number passed in the selectedTabKey props in the RTabs component is the index number of the specific item in the features array. So then the selectedTab will be opened automatically while the component loads in the new page in a browser. I suppose we need to make a function which will take the selectedKey index which matches the link that is clicked in the Platform component and pass it here. I need suggestions and code examples to implement all these functionality using reactjs.

Here is a gif of what I want to achieve: http://g.recordit.co/W5nrNZAuOd.gif