ReactJS: How to overlay a component on top of another component's element?

Question

I am just starting react. I have a component which has an input field and a button. There is another component which returns JSX (A blinking dot). I am importing the blinking dot component in main component and want to overlay the blinking dot on top of the input field when it is empty.

How can I achieve this? Please help me in this.

The code for this can be found in: https://stackblitz.com/edit/react-xmssdv

function App() {
  const [name, setName] = React.useState("");
  const inputChangeHandler = event => {
    setName(event.target.value);
    console.log(name);
  }

  return (
    <div>
        <input type="text" value={name} onChange={inputChangeHandler} />
      <div className="button">
        <button type="button">Click Me!</button>
      </div>

      <Dot />
    </div>
  );
}

Answer 1

It can be easily achieved by making the following two changes:
step 1. In index.js move the Dot component at the top:

function App() {
  const [name, setName] = React.useState("");
  const [showDot, setShowDot] = React.useState(true);

  React.useEffect(() => {
    name ? setShowDot(false) : setShowDot(true);
  }, [name])

  return (
    <div>
        { showDot ? <Dot /> : null }
        <input type="text" value={name} onChange={() => setName(event.target.value)} />
      <div className="button">
        <button type="button">Click Me!</button>
         { name ? <Dot /> : null }
      </div>


    </div>
  );
}

step 2. In Dot/dot.css introduce the positioning for dot as absolute:

.Blink {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}