How to scroll and expand an Accordion by onClick on an icon from a component?

I have a component MainContentwith its child Component AddMock. There is a table in MainContent which shows some list of items. It has a certain action on each row like view and edit which are rendered by Icons by semantic-UI react. By clicking on each icon, I need to scroll up and expand an accordion. The accordion is in AddMock.

// AddMock.js
const AddMock = () => {
  return (
    <div className="row">
      <Accordion style=>
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Add Mock
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container className="mockbody">
                <Header as="h3">Hierarchy</Header>
                <TabContent />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};

Below is the MainContent.js

const MainContent = () => {
  
  return (
    <div>
      <AddMock />
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header card-header-info">
                <h4 className="card-title ">MOCK</h4>
              </div>
              <div className="card-body">
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <Spinner
                      animation="border"
                      style=
                    />
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Is it possible to implement this with window.scrollTo() or any other better way to implement this in react?

from How to scroll and expand an Accordion by onClick on an icon from a component?