how to reload component back to original state when a prop changes in react

I have a prop called props.currPage. It updates depending on what button is pushed. Whenever a button is pushed, I'd like part of the component to reset back to its original state.

Currently, I cannot get the "listen to this page" button to reappear when i props changes.

Here is the codesandbox.

Below is the header.js file. If I click "listen to this page" it displays an audio player. If I click either button "one" "two" or "three" (that's part of another component) the audio player should go away, and "listen to this page" should reappear:

import React, { useState } from "react";
import ReactPlayer from "./ReactPlayerEx";
import { Button } from "@chakra-ui/react";

function Header(props) {
  const [showAudio, setAudio] = useState(0);
  return (
    <>
      {/* <Audio currPage={props.currPage} /> */}
      <div onClick={setAudio}>
        {showAudio ? (
          <ReactPlayer currPage={props.currPage} />
        ) : (
          <Button border={0}> Listen to this Page</Button>
        )}{" "}
      </div>
    </>
  );
}

export default Header;

Here is the audio player, ReactPlayerEx.js that will render when "listen to this page" is clicked

import React, { useEffect, useState } from "react";
import ReactPlayer from "react-player";

function RP(props) {
  const url =
    // "github.com/cre8ture/audioFilesForBL/raw/main/1.mp3"
    "https://github.com/cre8ture/audioFilesForBL/blob/main/" +
    props.currPage +
    ".mp3?raw=true";

  return (
    <div>
      <ReactPlayer
        url={url}
        // "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
        width="200x"
        height="50px"
        // style={{"textAlign": "left", "color": "red", "backgroundColor": "green"}}
        // light
        // playIcon = {<Button border={0} borderRadius={20} p={8}><Play/>  Listen to this Page </Button>}
        playing={false}
        controls={true}
      />
    </div>
  );
}

export default RP;

Here are the three buttons component, threeButtons,js

import React from "react";

function Tabs(props) {
  return (
    <>
      <button onClick={() => props.handleChangeProps(1)}>ONE</button>
      <br />
      <button onClick={() => props.handleChangeProps(2)}>TWO</button>
      <br />
      <button onClick={() => props.handleChangeProps(3)}>THRE</button>
    </>
  );
}

export default Tabs;

And here is the App.js

import React, { useState } from "react";
import Header from "./components/header";
import ConceptTabs from "./components/threeButtons";

function App() {
  const [pageID, setPageID] = useState(0);

  // goes to ConceptTabs
  let handleChange = (id) => {
    console.log("clicked", id);
    setPageID(id);
    return id;
  };

  console.log("pageID", pageID);

  return (
    <>
      <Header currPage={pageID} />
      <br />
      <ConceptTabs handleChangeProps={handleChange} />
      <br />
      {/* <ReactPlayer /> */}
    </>
  );
}

export default App;

thank you. I believe my issue is a poor knowledge of useEffect(). I'm quite new to React.

Add useEffect which will trigger everytime when props.currPage changes and sets the ReactPlayer visibility to false, only if it's already true.

import React, { useState, useEffect } from "react";
import ReactPlayer from "./ReactPlayerEx";
import { Button } from "@chakra-ui/react";

function Header(props) {
  const [showAudio, setAudio] = useState(false);
 
  useEffect(() => {
    if (showAudio) setAudio(false);
  }, [props.currPage]);

  return (
    <>
      {/* <Audio currPage={props.currPage} /> */}
      <div>
        {showAudio ? (
          <ReactPlayer currPage={props.currPage} />
        ) : (
          <Button border={0} onClick={() => setAudio(true)}>
            Listen to this Page
          </Button>
        )}
      </div>
    </>
  );
}

export default Header;