React – how to trigger focus on parent element when the child element is focusing

This is my current SearchBar
enter image description here

What I want to do is, when I focus the <InputBase>, it will help to trigger the focus on
<div className={} ref={refSearchBar}></div>, and make the box-shadow changes like below:

enter image description here

I tried to use UseRef, but it seems not working.


import React, { useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputBase from "@material-ui/core/InputBase";
import SearchIcon from "@material-ui/icons/Search";

const useStyles = makeStyles((theme) => ({
  search: {
    position: "relative",
    borderRadius: theme.shape.borderRadius,
    padding: "0 0.5rem",
    width: "50%",
    border: "1px solid grey",
    "&:focus": {
      boxShadow: "0 0 0 1px blue, 0 0 0 4px blue"

export default function PrimarySearchAppBar(props) {
  const classes = useStyles();
  const refSearchBar = useRef(null);

  return (
    <div className={} ref={refSearchBar}>
      <div className={classes.searchIcon}>
        <SearchIcon />
          root: classes.inputRoot,
          input: classes.inputInput
        inputProps={{ "aria-label": "search" }}
        style={{ width: "100%" }}
        onClick={() => {



The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)



div {
  margin: 1em;
  padding: 1em;
  border: solid blue 3px;
  border-radius: 5px;

div:focus-within {
  box-shadow: 5px 5px 15px 5px #000000;