Problem with row-alignment using React & Bootstrap GRID system

Question

Using React.JS and BootStrap grid system, I'm aiming to build the following page.

However, with the code linked at the bottom, the page looks like this (the alignment of the elements is wrong in multiple places. For example, the banner and search bar aren't aligned with the rest of the elements.

What am I doing wrong in using the BootStrap Grid System?

Before that, I'd like to specify that all the 4 MinWidget.jsx components are wrapped inside a MinWidgetCollection.jsx component. And all the elements encompased by the red border are wrapped inside a PageInformation.jsx component. The MiniWidgetCollection must take 7/12 of the page width while the BigWidget one the rest of 5/12 (with BootStrap grid having a maximum of 12 columns per row). Similarly, the first chart below must have 7/12 of width while the second chart only 5/12.

This is the current code which produces errors in alignment.

function App() {
  return (
    <div className='container'>
      <Searchbar/>
      <Banner/>
      <PageInformation/>
    </div>
  )
}

export const Searchbar = (props) => {
  return (
    <div className='row mb-5' style={{border: "1px solid green"}}>
        <div className='card-header p-7 w-50'> 
      </div>
  )




export const Banner = (props) => {
  return (
    <div className='row'>
        <div className='card mb-5 mb-xl-10'> 
        </div>
      </div>

  )

export const PageInformation = (props) => {
  return (
    <div style={{border: "1px solid red"}}>

      <div className='row'>
        <MinWidgetCollection />
        <BigWidget />
      </div>
      <div className='row'>
        <Chart newClassname='col-md-7 col-xs-12' />
        <Chart newClassname='col-md-5 col-xs-12' />
      </div>
    </div>
  )
}


export const MinWidgetCollection = (props) => {
    return (
        <div className='row col-md-7 col-xs-12'>

            <MinWidget />
            <MinWidget />
            <MinWidget />
            <MinWidget />
        </div>

    )
}


export const MinWidget = (props) => {
  return (
    <div className='col-md-6 col-xs-12'>
      <div className='card card-md-6 card-xs-12 mb-xl-8'>
      </div>
    </div>
  )
}


export const BigWidget = (props) => {
  return (
    <div className='col-md-5 col-xs-12'>
        <div className="card card-xl-stretch mb-5 mb-xl-8 h-100">
        </div>
    </div>
  )
}


export const Chart = (props) => {
 <div className={props.newClassname}>
      <div className={`card mt-5 `}>
      </div>
    </div>

}