How i should pass objecte in props?

Question

Hi to all i'm a noob with react i have a question for the comunity i'm using the version of react 18 and i dont know why is not working this code. My objective its pass an objecte with react between components with the tag. I see that in another post of stackoverflow.

//Component ListMovies
    {arrayMovies.map(movie => (
                          ...
//open link an get props from 
                                            <Link to={{
                                                pathname:`/movies/${movie.id}`
                                            }} className='btn btn-primary' state={{ from: "test" }}>
                                         ...
                            ))}

//Component ShowMovie for show result of props
import React, { Component } from 'react'
import { useLocation } from 'react-router-dom'
function CityPage () {
  const location = useLocation()
  const { from } = location.state

  return (
    <div>
         City is {from} 
    </div>
  )
}
export default class MovieShow extends Component {

  constructor(props) {
    super();
    
    console.log();
  }
  
  render() {
    return (
     ...
       //Show result of props here
          {CityPage()}
    
     ...
    )
  }
}

//Index.js

import NavBarProba from './components/NavBarProba';
import ListMovies from './components/ListMovies';
import MovieShow from './components/MovieShow';

function App() {
  return (
    <div className="App">
      
    <NavBarProba />
    <Routes>
      <Route path="/" element={<ListMovies />}/>
      <Route path="/movies/:id" element={<MovieShow />}/>
    </Routes>
    <FooterProba />
    </div>
  );
}

Thank you for you time. The components ListMovies and ShowMovie have the same jerarquy