React component rendering twice

Question

Guys I’m having a problem where my components are rendered 2/3 times and I’m suspicious of an implementation, but I’m not sure if it’s her fault. The implementation is as follows, I have a LayoutContext responsible for controlling the props that I pass to my layout as follows:

class App extends Component {
render() {
    return (
        <AuthProvider>
            <LayoutProvider>
                <Provider {...store}>
                    <Routes></Routes>
                </Provider>
            </LayoutProvider>
        </AuthProvider>
    );
}

}

This is where I spend my props consuming mine LayoutContext:

  render() {
    const Layout = this.getLayout();
    // rendering the router with layout
    return (
        <BrowserRouter>
        <LayoutContext.Consumer>
        {value => {
            return(
  
            <Layout 
                {...this.props}
                hideSearch={value.hideSearch}
                pageTitle={value.pageTitle}
                topBarModule={value.topBarModule}
                leftSideBarClass={value.leftSideBarClass}
                headChildren={value.headChildren}
            >
                <Switch>
                    {routes.map((route, index) => {
                        return (
                            !route.children && (
                                <route.route
                                    key={index}
                                    path={route.path}
                                    roles={route.roles}
                                    exact={route.exact}
                                    component={route.component}></route.route>
                            )
                        );
                    })}
                </Switch>
            </Layout>
                  )}}
                  </LayoutContext.Consumer>
        </BrowserRouter>
    );
}
}

And then to change the layout I do this (I think the error is here), inside the ComponentDidMount of each component I want to make the layout change I change the props of my LayoutContext:

    static contextType = LayoutContext;

componentDidMount() {
    console.log("passou aqui")
    const { financialBasics, setHeadChildren, setPageTitle } = this.context
    setPageTitle("Clientes e Fornecedores > Exibir Todos")
    setHeadChildren()
    financialBasics()
}

the console.log of ComponentDidMount is fired twice and if I take the LayoutContext he’s only fired once, so I suspect that’s it

#EDIT - 1

const Routes = (props) => {


const layoutContext = useContext(LayoutContext)

const layoutMemo = useMemo(() => {
    return layoutContext
}, layoutContext)

const propsMemo = useMemo(() => {
    return props
}, props)


// returns the layout
const getLayout = () => {

    if (layoutContext.isModule) return AuthLayout;

    let layoutCls = VerticalLayout;

    switch (props.layout.layoutType) {
        case layoutConstants.LAYOUT_HORIZONTAL:
            layoutCls = HorizontalLayout;
            break;
        case layoutConstants.LAYOUT_DETACHED:
            layoutCls = DetachedLayout;
            break;
        default:
            layoutCls = VerticalLayout;
            break;
    }
    return layoutCls;
};



const Layout = getLayout();

return (
    <BrowserRouter>
        <Layout
            {...propsMemo}
            {...layoutMemo}
        >
            <Switch>
                {routes.map((route, index) => {
                    return (
                        !route.children && (
                            <route.route
                                key={index}
                                path={route.path}
                                roles={route.roles}
                                exact={route.exact}
                                component={route.component}></route.route>
                        )
                    );
                })}
            </Switch>
        </Layout>
    </BrowserRouter>
);
}

const mapStateToProps = state => {
return {
    layout: state.Layout,
    user: state.Auth.user,
   };
};

export default connect(mapStateToProps, null)(Routes)