Как в React вызвать функцию в дочернем компоненте?

В родителе есть кнопка button. По нажатию она должна вызывать функцию rotateLeft в дочернем компоненте. Как это сделать?

Родитель:

function App() {

  return (
<div className="App">
<Arrow />
<button onClick={rotateLeft}></button>
</div>
)
}

Ребенок:

import React, {useEffect, useRef, useState} from 'react';
import style from './Arrow.module.scss';
import arrowImg from './img/arrow.png';

const rotateArray = [0,315,270,225,180,135,90,45];
const rotateIndexDefault = 0;
const posXDefault = 1;
const posYDefault = 8;

const Arrow = props => {

    const [rotateIndex, setRotateIndex] = useState(0);
    const arrowRef = useRef();

    useEffect(() => {
        reset();
    }, [])

    useEffect(() => {

        console.log('rotateIndex = ', rotateIndex);
        setRotate(rotateArray[rotateIndex]);
    }, [rotateIndex])

    const setPosition = (x, y) => {

        arrowRef.current.style.left = x * 10 + '%';
        arrowRef.current.style.top = y * 10 + '%';
    }

    const setRotate = (deg) => {

        arrowRef.current.style.transform = 'rotate(' + deg + 'deg)';
    }

    const rotateLeft = () => {

        if (rotateIndex === rotateArray.length - 1) {
            setRotateIndex(0);
        } else {
            setRotateIndex(prev => prev + 1);
        }
    }

    const rotateRight = () => {

        if (rotateIndex === 0) {
            setRotateIndex(rotateArray.length - 1);
        } else {
            setRotateIndex(prev => prev - 1);
        }
    }

    const reset = () => {

        setPosition(posXDefault, posYDefault);
        setRotateIndex(rotateIndexDefault);
    }

    return (
        <img className={style.arrow} alt='стрелка' src={arrowImg} ref={arrowRef}/>
    )
}

export default Arrow;