Передача события между компонентами React

Пытаюсь заставить кнопку "очистить форму" в компоненте Clear сбрасывать значения в компонентах Card до нуля, однако знаний не хватает. Прошу подсказать как соединить два компонента, у которых один родитель.

это родительский элемент

import React from 'react';
import Card from './components/card/Card'
import Clear from './components/Clear/Clear';
import './components/background/background.css'

const App = () => {
  
  return (
    <div className="bg">
      <div className="bg__card">
        <Card />
        <Card />
      </div>
      <div>
        <Clear />
      </div>
    </div>
  );
};

export default App;

Элемент Card:

import React, { useState } from 'react';
import './Card.css';

const Card = () => {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }
  function decrement() {
    if (count > 0) {
      setCount(count - 1);
    }
  }
  return (
    <div>
      <button
        className="card"
        onClick={increment}
        onContextMenu={(e) => {
          e.preventDefault();
          decrement();
        }}
      >
        {count}
      </button>
    </div>
  );
};

export default Card;

Элемент Clear:

import React from 'react';
import './Clear.css';

const Clear = () => {
  return <button className="clear">Очистить форму</button>;
};

export default Clear;