How do I change css class of parent if input field is focused

im trying to make a search box with a magnifying glass icon that becomes blue when the input field is focused.

the MagnifyingGlass component inherits its color from its parent element.

import styles from './Search.module.sass';
import { useState } from 'react';
import MagnifyingGlass from '../../icons/MagnifyingGlass';


const Search = () => {
  

  const [inputValue, setInputValue] = useState('');
  

  const handleChange = (e) => {
    setInputValue(e.target.value);
    
  };

  return (
    <div className={styles.searchWrapper}>
      <input
        value={inputValue}
        onChange={handleChange}
        className={styles.searchInput}
        type='text'
        placeholder='Waar bent u naar opzoek?'
     
      />
      <span> // needs to contain a className that results in the color to change
        <MagnifyingGlass size='small' /> // inherits color from parent
      </span>
    </div>
  );
};
export default Search;