title: How to add scroll bar to a react component?
body: <p>I have an app like this. <a href="https://i.stack.imgur.com/pBtHH.png" rel="nofollow noreferrer">App image</a><br />
  I want to add a scroll bar to the section on left and not the whole page. Scroll the left side keeping the right side fixed. Here is my code.</p>
  <pre><code>function LeftContent(props) {
  const { getRef, onHandleNextButton, onHandleStopRecording, ...restProps } = props;
  const matches = useMediaQuery('(max-width:800px)');
  const items = [...Array(15)].map((val, i) =&gt; `Item ${i}`);
  return (
      &lt;Box width={matches ? &quot;100%&quot; : &quot;35%&quot;} flex={1} bgcolor={grey[200]} boxShadow=&quot;2px 0px 4px lightgrey&quot; zIndex={1} display=&quot;flex&quot; flexDirection=&quot;column&quot; overflow-y=&quot;scroll&quot;&gt;
          &lt;QuestionTrackerBox
              {...restProps}
          /&gt;
          &lt;ul&gt;
              {items.map((item, i) =&gt; (&lt;li key={`item_${i}`}&gt;{ item }&lt;/li&gt;))}
          &lt;/ul&gt;
          &lt;div overflow-y=&quot;scroll&quot;&gt;
          {!matches &amp;&amp; &lt;RecordedQuestionsList
              {...restProps}
          /&gt;}
          {matches &amp;&amp; &lt;VideoInterviewBox
              getRef={(node) =&gt; getRef(node)}
              {...restProps}
          /&gt;}
          &lt;QuestionInformationBox
              onHandleNextButton={onHandleNextButton}
              onHandleStopRecording={onHandleStopRecording}
              {...restProps}
          /&gt;
          &lt;/div&gt;
      &lt;/Box&gt;
  )}
  
  function RightContent(props) {
  const { getRef, ...restProps } = props;
  const matches = useMediaQuery('(max-width:800px)');
  if (matches) return null;
  return (
      &lt;VideoInterviewBox
          getRef={(node) =&gt; getRef(node)}
          {...restProps}
      /&gt;
  )}    
  </code></pre>
  <p>What changes do I need to make?</p>