Display the values of checkboxes in React

I have mutltiple checkboxes in a React app but I cant seem to display their "true" values. I just want to display which ones are flagged.

Thanks for the help :)

Julie

<label>Which features does your bubble have?
            <span> Wifi
            <input 
            type="checkbox"
            onChange={handleChange}
            value={wifi}
            />

import React, { useState } from "react";
import NewBubbleForm from "./NewBubbleForm";

function NewBubble(props) {
  const [name, setName] = React.useState("");
  const [postcode, setPostcode] = React.useState("");
  const [workstations, setWorkstations] = useState(0);
  // const [isChecked , setIsChecked] = useState(false)
  const [wifi, setWifi] = React.useState(true);
  const [petfriendly, setPetfriendly] = React.useState(true)
  const [kitchen, setKitchen] = React.useState(true);
  const [quietspace, setQuietspace] = React.useState(true);
  const [wheelchair, setWheelchair] = React.useState(true);
  const [smoking, setSmoking] = React.useState(true);
  


  function handleChange(event) {
    // console.log('event: ', event)
    console.log(event.target.checked);
    switch (event.target.name) {
      case "name":
        setName(event.target.value);
        break;
      case "postcode":
        setPostcode(event.target.value);
        break;
      case "workstations":
        setWorkstations(event.target.value);
        break;
      case "wifi":
        setWifi(event.target.checked);
        break;
      case "petfriendly":
        setPetfriendly(event.target.value);
          break;
      case "kitchen":
        setKitchen(event.target.value);
        break;
      case "quietspace":
        setQuietspace(event.target.value);
        break;
      case "wheelchair":
        setWheelchair(event.target.value);
        break;
      case "smoking":
        setSmoking(event.target.value);
        break;
      default:
        break;
    }
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(
      `A request has been logged: 
        From ${name} ${postcode} with ${workstations} spots and WIFI ${wifi}
        `
    );
    let newBubbleData = {name, postcode, workstations, wifi, petfriendly, kitchen, quietspace, wheelchair, smoking}
    props.showNewBubble(newBubbleData);
    console.log("New bubble" , newBubbleData)
    setName("");
    setPostcode("");
    setWorkstations("");
    setWifi("");
    setPetfriendly("")
    setKitchen("")
    setQuietspace("")
    setWheelchair("")
    setSmoking("")
    // the submission event would then add the new bubble to the backend tables
    // the map would then be returned with the new bubble on it
  }

  return (
    <div className="NewBubble">
      <form onSubmit={handleSubmit}>
        Create a new Bubble
        <NewBubbleForm
          name={name}
          postcode={postcode}
          workstations={workstations}
          handleChange={handleChange}
          wifi={wifi}
          petfriendly={petfriendly}
          kitchen={kitchen}
          quietspace={quietspace}
          wheelchair={wheelchair}
          smoking={smoking}

        />
        <button id="buttonCreateBubble" type="submit">
          {" "}
          Create a bubble{" "}
        </button>
      </form>
    </div>
  );
}

Here is the APP receiving the info

function App() {
  // const history = useHistory();
  const [bubble, setBubble] = useState([{name: "Julie", workstations: ""}]);
  let history = useHistory();

  function showNewBubble(newBubbleData) {
    // event.preventDefault();
    console.log("New bubble is back to app", newBubbleData)
    setBubble(newBubbleData)
    history.push("/new-bubble-created");
  }

  
  return (
    <div>
      <Navbar />
      <Routes 
      showNewBubble={()=>showNewBubble}
      bubble={bubble}
      />
    </div>
  );
}

export default App;

And here is the final component where I display my checked box The props.bubble.wifi does not display anything even if its value in the console is true!

import React from 'react';
import MapBubbles from "./MapBubbles"
// import MapBubbleForm from "./MapBubbleForm";


function MapWithNewBubble(props) {

    console.log("This is props.value.wifi" , props.bubble.wifi)
    return (
        <div className="NewBubble">
           <h2>Your new bubble has been created</h2>
           <p>Welcome {props.bubble.name}</p>
           
            <p> You have {props.bubble.workstations} workstations to offer and {props.bubble.wifi}</p>
            <MapBubbles />
        </div>
    );
}

export default MapWithNewBubble;