React router changing path but not rendering component or data from API

Question

Description

i'm currently working in reactjs and apollo client projects. I'm developing the page that can show information of usergroup when im clicking data on table.

it should be look like this when clicking single data :

the routes code is just like this :

routes.js

  {
    path: '/konfigurasi',
    exact: true,
    sidebar: null,
    main: () => (
      <>
          <PengaturanPengguna/>
      </>
    )
  },
  {
    path: '/konfigurasi/pengaturan-pengguna',
    sidebar: null,
    main: () => (
        <>
            <PengaturanPengguna/>
        </>
    )
  },
  {
    path: '/konfigurasi/grup-dan-hak-akses-pengguna',
    exact: true,
    sidebar: null,
    main: () => (
        <>
            <GrupDanHakAkses/>
        </>
    )
  },
  {
    path: '/konfigurasi/grup-dan-hak-akses-pengguna/form-kontrol-dan-hak-akses/:groupId',
    sidebar: null,
    exact: true,
    main: () => (
        <>
            <FormKontrolDanHakAkses/>
        </>
    )
  },

and App.js is place for applying routes :

const App = () => {
  return (
      <Wrapper>
        <SidebarApp />
        <Switch>
          {routes
            .filter(({ sidebar }) => !!sidebar)
            .map((route, index) => (
              <Route key={index} path={route.path} exact={route.exact} />
            ))}
        </Switch>
        <ContentWrapper>
          <Content>
            <NavigationBar />
            <BreadCrumbs/>
            <TextHeader/>
            <Switch>
              {routes
                .filter(({ main }) => !!main)
                .map((route, index) => (
                  <Route
                    key={index}
                    path={route.path}
                    exact={route.exact}
                    children={<route.main />}
                  />
                ))}
            </Switch>
          </Content>
          <Footer />
        </ContentWrapper>
      </Wrapper>
  );
};

Problem

When im clicking single data in this code :

Table Component

<tbody>
                {
                    usersGroup.map((usergroup, index) => (
                        <tr key={ usergroup.groupId }>
                            <td>{ index + 1 }</td>
                            <td> { usergroup.groupName } </td>
                            <td> { usergroup.groupDesc }  </td>
                            <td>
                                <div className='d-flex gap-2'>
                                    <Button 
                                        variant='outline-info' 
                                    >
                                        <Link to={{
                                            pathname: `/konfigurasi/grup-dan-hak-akses-pengguna/form-kontrol-dan-hak-akses-pengguna/${usergroup.groupId}`,
                                            state: { usersGroup: usergroup }
                                        }}
                                        >Edit</Link>
                                    </Button>
                                    <Button variant='outline-danger'>Hapus</Button>
                                </div>
                            </td>
                        </tr>
                    ))
                }
            </tbody>

the content or layout information data is not showing, but the URL is changing.

also , here's where the components form consume the data.

page : formKontroldanHakAkses

const FormKontrolDanHakAkses = () => {
    const { groupId } = useParams(); 

    const { data, loading, error } = useQuery(GET_SINGLE_USER_GROUP, {
        variables: {
            groupId
        },
        onError: (err) => {
            console.error(JSON.stringify(err, null, 2));
        }
    });

    const handleSubmit = (data) => {
        // disini letakkan ternary operator untuk membedakan antara create dan edit
    }

    return (
        <Container>
            <Row>
                <Col sm={6}>
                    <Card>
                        <Card.Header>
                            <Card.Title>
                                <span className='text-uppercase'>Informasi Grup Akun</span>
                            </Card.Title>
                        </Card.Header>
                        <Card.Body>
                            <FormKH data={ data } id={ groupId }/>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </Container>
    )
};

FormKH component :

const FormKH = (props) => {
    const [value, setValue] = useState({ groupId: props.groupId, data: props.data || ''   })

    return (
            <Form>
                <Form.Group className="mb-3">
                <label className="text-bold base-sm">Kode Grup</label>
                <Form.Control type="text" value={value.groupId}/>
            </Form.Group>
            <Form.Group className="mb-3">
                <label className="text-bold base-sm">Nama Grup</label>
                <Form.Control type="text" value={value.groupName} />
            </Form.Group>
            <Form.Group className="mb-3">
                <label className="text-bold base-sm">Deskripsi Grup</label>
                <Form.Control as="textarea" value={ value.groupDesc }/>
            </Form.Group>
        </Form>
    )            
};

Question

What's the solution for fix this problems so when url changing (by groupID) is also change the content too based on id (groupID)?

any help will be appreciated, thanks in advance.