How to call a local component function in main component in react js(props)

//local component!!!!!
import { useState, useEffect } from "react";
import axios from "axios";
import React from "react";

const Getjokes = () => {
  const [joke, setjoke] = useState([]);
  const dadjokes = async () => {
    const num = Math.floor(Math.random() * 30) + 1;
    const res = await axios.get(
      `https://icanhazdadjoke.com/search?page=${num}`,
      {
        headers: { Accept: "application/json" },
      }
    );
    setjoke(res.data.results);
  };

  useEffect(() => {
    dadjokes();
  }, []);
  const j1 = joke[1] ? joke[1].joke : null;
  return (
    <>
      <button onClick={dadjokes}></button>
      <p>{j1}</p>
    </>
  );
};
export default Getjokes;
//Main component!!!!!!!!!
import React from "react";
import Getjokes from "./Getjokes";
const App = () => {
  return (
    <div>
      <Getjokes />
    </div>
  );
};

export default App;

In the local component i have a button that fetches everytime a new joke from api on clicking.i wanna return this button in main component with the same functionality(no problem in api area i just want to know how i would able to use props here or may any other method to resolve it.