How Can I make other grid items maintain the height of one of the grid item and become scrollable when the height becomes longer than the grid item

Question

I am working with Material UI and I have 2 grid item. One an image carousel and the other a side menu.

THe side menu would contain more items which at some point stretches longer than the image carousel.

I dont want it to be so. I want this such that when the sidebar always maintains the height of the image carousel, despite the size of the screen. since it is responsive and the height of the carousel reduces based on screen size. WHen this happens, i want the height of the sidebar to reduce as well and align with the carousel size.

THis is the grid

    <Grid container spacing={1}>
      <Hidden mdDown>
        <Grid item xs={2} sm={2} md={3} lg={2}>
          <SearchNav />
        </Grid>
      </Hidden>

      <Grid item xs={12} md={9} lg={10}>
        <TopCarousel />
      </Grid>
    </Grid>

The Top Carousel is this:

import { Carousel } from 'react-responsive-carousel'
import Banner1 from '../img/banner1.jpg'
import Banner2 from '../img/banner2.jpg'
import Banner3 from '../img/banner3.jpg'
import Banner4 from '../img/banner4.jpg'

const TopCarousel = () => {
  return (
    <Carousel autoPlay infiniteLoop>
      <div>
        <img src={Banner1} alt='banner' />
      </div>
      <div>
        <img src={Banner2} alt='banner' />
      </div>
      <div>
        <img src={Banner3} alt='banner' />
      </div>
      <div>
        <img src={Banner4} alt='banner' />
      </div>
    </Carousel>
  )
}

export default TopCarousel

This is for the sidebar

import {

  Divider,
  MenuList,
  MenuItem,
  Typography,
  Paper,
} from '@mui/material'
import React, { useState, useEffect } from 'react'
import { getAllCategories } from '../../apis'

const SearchNav = () => {
  const [categories, setCategories] = useState([])

  useEffect(() => {
    loadCategories()
  }, [])

  // Load All Categories
  const loadCategories = async () => {
    const res = await getAllCategories()
    setCategories(res.category)
  }

  return (
    <Paper>
      <MenuList>
        <MenuItem>
          <Typography variant='h6' component='body'>
            ALL CATEGORIES
          </Typography>
        </MenuItem>
        <Divider />
        {categories &&
          categories.map((category) => (
            <MenuItem key={category._id} sx={{ pl: 4 }}>
              <Typography>{category.name}</Typography>
            </MenuItem>
          ))}
      </MenuList>
    </Paper>
  )
}

export default SearchNav

My category in the sidebar are over 50 items. so i want it to inherit the width of the carousel and become scrollable