Reactjs – How do I let a button from my child component update the state in my parent component so it displays my mainpage, the RecipeListPage component?

I’m using in App.jsx my useState. I’ve got 2 child components, and . With the ternary in App.jsx, it will render the homepage the with the choices. When you click on details, you get details from one item. That code is in . In this component I’ve made a "back" button to get back to the homepage (). The problem that I have here, is that if I click on the back button, it doesn’t send me back to the homepage. I tried some different stuff in my code, but I don’t know what I am doing wrong. Is it wrong syntax or am I completely off with the code?

I tried to switch the ternary around, tried to make a new function, play with the input of the arguments.
This is the code I have:

App.jsx:

import { RecipeListPage } from "./pages/RecipeListPage";
import { data } from "./utils/data";
import { useState } from "react";
import { RecipePage } from "./pages/RecipePage";

export const App = () => {
  const [userRecipe, setUserRecipe] = useState();

  return <div>{userRecipe ? <RecipePage clickFn={setUserRecipe} recipe={userRecipe} /> : 
         <RecipeListPage data={data} clickFn={setUserRecipe} />}</div>;
};

--------------------------------------------------------------------------------------------------------
RecipePage.jsx:

import { Box, Heading, Button as CButton, Image } from "@chakra-ui/react";

export const RecipePage = (item, clickFn) => {
  const handleClick = () => {
    clickFn(null);
  };

  return (
    <Box ml={2}>
      <Heading>{item.recipe.label}</Heading>
      <Image mt={2} mb={2} h={"50%"} w={"50%"} src={item.recipe.image} />
      <p>
        <strong>Meal type:</strong> {item.recipe.mealType}
      </p>
      <p>
        <strong>Dish type:</strong> {item.recipe.dishType}
      </p>
      <p>
        <strong>Total cooking time:</strong> {item.recipe.totalTime}
      </p>
      <p>
        <strong>Diet label:</strong> {item.recipe.dietLabels.join(", ")}
      </p>
      <p>
        <strong>Health label:</strong> {item.recipe.healthLabels.join(", ")}
      </p>
      <p>
        <strong>Cautions:</strong> {item.recipe.cautions.join(" || ")}
      </p>
      <p>
        <strong>Ingredients:</strong> {item.recipe.ingredientLines.join(" || ")}
      </p>
      <p>
        <strong>Servings:</strong> {item.recipe.yield}
      </p>

      <CButton mt={5} type="button" onClick={handleClick}>
        Back
      </CButton>
    </Box>
  );
};
--------------------------------------------------------------------------------------------------------
RecipeListPage.jsx:

import { Center, Image, Stack, Heading, Box, Button as CButton } from "@chakra-ui/react";
import { TextInput } from "../components/TextInput";

export const RecipeListPage = ({ data, clickFn }) => {
  const onClickFn = recipe => {
    clickFn(recipe);
  };

  const recipeListItems = data.hits.map(obj => (
    <Box key={obj.recipe.label}>
      <Heading>{obj.recipe.label}</Heading>
      <Image mb={8} mt={2} borderRadius="full" objectFit="cover" boxSize="100px" src={obj.recipe.image} alt={obj.recipe.label} />

      <CButton type="button" onClick={() => onClickFn(obj.recipe)}>
        Details
      </CButton>
    </Box>
  ));

  return (
    <Center>
      <Stack direction="column" spacing="100px">
        <TextInput />
        {recipeListItems}
      </Stack>
    </Center>
  );
};