How do I shadow a div if it's child element is focused?

Issue

I basically want searchBarFirstDiv to form a shadow when searchBarInput is selected

I am using REACT.

Here's my HTML for reference:

<div className={css.searchBarFirstDiv}>
  <label className={css.searchBarDivContent} for="location-search-input">
     <div className={css.searchBarHeadingFont}>Location</div>
       <input
          id="location-search-input"
          placeholder="Where are you going?"
          className={css.searchBarInput}
        />            
  </label>
</div>

How do I do this?

Solution

Pure CSS solution

#main {
  padding: 30px;
  margin: 31px;
}

#main:focus-within {
  box-shadow: 0px 0px 10px red;
}

<div id="main">
  <input type="text" id="input" placeholder="focus me!">
</div>

Answered By - ŕ̷͉ge̸ḓ̶̅i̷t