How to pass props around with React Router

Question

I have this class here call UtilityCard:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./UtilityCard.css";

export class UtilityCard extends Component {
  render() {
    
    const {
      map,
      type,
      start_location,
      land_location,
      movement,
      img,
      video,
      description,
      id,
    } = this.props;
    const UtilityURL = "/utility/" + id;
    return (
      <Link
        className="UtilityCard-link"
        to={{
          pathname: UtilityURL,
          state: {
            map: map,
            type: type,
            start_location: start_location,
            land_location: land_location,
            movement: movement,
            img: img,
            video: video,
            description: description,
            id: id,
          },
        }}
      >
        <div className="UtilityCard">
          <img className="UtilityCard-image" src={img} alt={id} />
          <h1 className="UtilityCard-info">
            {land_location} {type} from {start_location}
          </h1>
        </div>
      </Link>
    );
  }
}

export default UtilityCard;

The class below is called UtilityPage. I would like to take the props from a selected UtilityCard and display it on my UtilityPage in order to show more detail about the selected UtilityCard.

import React, { Component } from "react";
import Container from "@material-ui/core/Container";
import "./UtilityPage.css";

export class UtilityPage extends Component {
  
  componentDidMount() {
    const { handle } = this.props.match.params;
    const {
      map,
      type,
      start_location,
      land_location,
      movement,
      img,
      video,
      description,
      id,
    } = this.props.location.state;
    
  }

  render() {
    return (
      <Container maxWidth="lg">
        <div className="UtilityPage">
          <h1>This is the UTILITYPAGE</h1>
          <div className="UtilityPage-content">
            <p>This utility page is for {this.props.location.state.map}</p>
            <p>
              The {this.props.location.state.type} is thrown from{" "}
              {this.props.location.state.start_location} and lands at{" "}
              {this.props.location.state.land_location}
            </p>
            <p>
              This {this.props.location.state.type} requires a{" "}
              {this.props.location.state.movement}
            </p>
          </div>
          <img src={this.props.location.state.img} alt={this.props.location.state.id} className="UtilityPageImg" />
          <h1 className="UtilityPage-description">
            DESCRIPTION: {this.props.location.state.description}
          </h1>
        </div>
      </Container>
    );
  }
}

export default UtilityPage;

I am getting the following error when clicking on a UtilityCard:

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

Not sure if this will help but I am seeding the UtilityCards from this class here, it takes information from a json file and maps out the data depending on the url that the user is currently at. Ideally I ONLY want the data from a specific card that the user selects from the list and passes those specific props onto the UtiltiyPage instead of having to pass ALL the data from the UtiltiyList

import React, { Component } from "react";
import UtilityCard from "./UtilityCard";
import Container from "@material-ui/core/Container";
import seedUtilityDust2 from "./seedData/seedUtilityDust2";
import seedUtilityVertigo from "./seedData/seedUtilityVertigo";

export class UtilityList extends Component {
  constructor(props) {
    super(props);
    this.state = { CurrentMap: this.findMap() };
    this.findMap = this.findMap.bind(this);
    this.seedUtility = this.seedUtility.bind(this);
  }
  findMap() {
    var URL = window.location.href;
    var URLpos = URL.search("de");
    var URLid = URL.substr(URLpos);
    return URLid;
  }
  seedUtility(id) {
    switch (id) {
      case "de_dust2":
        return seedUtilityDust2.map((utility) => {
          return <UtilityCard {...utility} key={utility.id} />;
        });
      case "de_vertigo":
        return seedUtilityVertigo.map((utility) => {
          return <UtilityCard {...utility} key={utility.id} />;
        });
      default:
        return <h1>THIS MAP DOESNT EXIST</h1>;
    }
  }

  render() {
    console.log("state is: ", this.state.CurrentMap);
    return (
      <div>
        <Container maxWidth="lg">
          <div className="container">
            {this.seedUtility(this.state.CurrentMap)}
          </div>
        </Container>
      </div>
    );
  }
}

export default UtilityList;

I am still very new to React and after looking online for react router tutorials on how to pass props I cant seem to figure it out. As I mentioned before I only want the props from a selected UtilityCard and have those props passes into my UtilityPage to show those props in more detail. Any help would be extremely appreciated. If there is any additional information I can provide please let me know.