How to access navigate parameters within another component?

Question

I am navigating from one page to another and trying to pass data. Witout being able to use the render method, I've been trying navigate.

Here is my method for going to a board element:

  const goToBoard = () => {
    const boardId = props.board.id;
    navigate(`/board/${boardId}`, {
      state: {
        title: props.board.title,
        background: props.board.background
      }
    });
  };

However, I am unable to figure out how to access the 'state' components in my other component. In the react dev tools, I can see the data up in a Navigation.Provider.

Here are the two sections. Passing from here:

import React from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router";

function BoardPreview(props) {
  let navigate = useNavigate();

  const goToBoard = () => {
    const boardId = props.board.id;
    navigate(`/board/${boardId}`, {
      state: {
        title: props.board.title,
        background: props.board.background
      }
    });
  };

  return (
    <div>
      <ul
        className="board-preview-item"
        onClick={goToBoard}
        style={{ backgroundColor: props.board.background }}
      >
        <li>{props.board.title}</li>
      </ul>
    </div>
  );
}

BoardPreview.propTypes = {
  board: PropTypes.object.isRequired
};

export default BoardPreview;

And then trying to access from here:

import React from "react";
import List from "./List";
import { useState, useEffect } from "react";
import data from "../sampleData";
import { useParams } from "react-router-dom";

function Board(props) {
  let params = useParams();

  const [list, setLists] = useState({ currentLists: [] });

  useEffect(() => {
    setLists({ currentLists: data.lists });
  }, []);

  let addBoardInput = React.createRef();

  const createNewList = (e) => {
    e.preventDefault();
    const newList = {
      id: Math.random(),
      title: addBoardInput.current.value,
      board: 500,
      createdAt: new Date(),
      cards: [
        {
          id: 1,
          text: "Card 1"
        },
        {
          id: 2,
          text: "Card 2"
        }
      ]
    };
    if (newList.title) {
      setLists({ currentLists: [...list.currentLists, newList] });
    }
    addBoardInput.current.value = "";
  };

  return (
    <div className="board-wrapper">
      <p>Board Title: {params.boardId}</p>
      <div className="lists-wrapper">
        {Object.keys(list.currentLists).map((key) => (
          <List key={list.currentLists[key].id} list={list.currentLists[key]} />
        ))}
      </div>

      <form onSubmit={(e) => createNewList(e)} className="new-list-wrapper">
        <input
          type="text"
          ref={addBoardInput}
          name="name"
          placeholder=" + New list"
        />
      </form>
    </div>
  );
}

export default Board;