React nested router One works and one doesn't work

Hi An unknown thing happened to me during the my project

I had to use nested router in my project but One works and one doesn't work I don't know reason So I leave a question

first Baselayout return this router

<BrowserRouter>
        <div className={style.baselayout}>
          <Routes>
            <Route path="/*" element={<Home prefix={this.state.prefix} />} />
            <Route path="/dreablecrm/" element={<DreableMain prefix={this.state.prefix}/>}/>
            <Route
              path="/login"
              element={
                <Login
                  prefix={this.state.prefix}
                  Updator={this.Updator}
                  data={this.state.data}
                />
              }
            />
            <Route
              path="/signup"
              element={<SignUp prefix={this.state.prefix} />}
            />
          </Routes>
        </div>
      </BrowserRouter>

and Home component return

    <div className={style.homeContainer}>
      <Header prefix={props.prefix} />
      <div className={style.content}>
        <Routes>
          <Route path="/" element={<Main prefix={props.prefix} />} />
        </Routes>
        <Routes>
          <Route
            path="/priceinfo"
            element={<PriceInfo prefix={props.prefix} />}
          />
        </Routes>
        <Routes>
          <Route
            path="/customerservice"
            element={<CustomerCenter prefix={props.prefix} />}
          />
        </Routes>
        <Routes>
          <Route path="/sighup" element={<SignUp prefix={props.prefix} />} />
        </Routes>
        <Routes>
          <Route
            path="/userinfo"
            element={<UserTabMenu prefix={props.prefix} />}
          />
        </Routes>
      </div>
      <Footer prefix={props.prefix} />
    </div>
  );

return this router

and

Main return

        <div className={style.dreableWrap}>
            <div className={style.dreableContainer}>
                <SideMenue/>
                <div className={style.content}>
                    <Routes>
                        <Route
                            path="/dreablecrm"
                            element={<CustomerManagement prefix={props.prefix} />}
                        >
                        </Route>
                        <Route
                            path="/customer"
                            element={
                                <CustomerManagement prefix={props.prefix} />
                            }
                        />
                    </Routes>
                    
                </div>
            </div>
        </div>

Home nested router is working but Main router is not working I don't know what reason please help me someone

I wanted make like this