I am having a problem with the WordPress menu with react routing, I don't know if I should use the react-router package or not .. or it can be handled otherwise.

I am basically creating a WordPress menu and then a submenu and trying to load react js on the submenu but it's loading on the main page, except the settings page.

add_action( 'admin_menu', 'plugin_admin_menu' );

function plugin_admin_menu() {
        add_menu_page(
            __( 'PluginName', WPA_TEXT_DOMAIN ),
            __( 'PluginName', WPA_TEXT_DOMAIN ),
            'manage_options',
            'plugin-name-slug',
            'render_main_screen_callback',
            '', // icon
            60 // priority/position
        );

            add_submenu_page(
                'plugin-name-slug,
                __( 'Settings', WPA_TEXT_DOMAIN ),
                __( 'Settings', WPA_TEXT_DOMAIN ),
                'manage_options',
                'plugin-name-settings',
                'render_settings_screen_callback'
            );
}

so far is good but the issue is I am trying to load react app here on the submenu settings page but its loading on main_menu rather than the submenu

function render_settings_screen_callback() {
        printf( '<div id="%s" class="%s"></div>', 'admin-root-app', 'wpauctionify-wrap wrap' );
}

and this is the code of my react side

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

const rootElement = document.getElementById('admin-root-app');

if ( rootElement ) {
    ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>, rootElement );
}