On submission of the form, I want to pass the state of UserLocation and form data to another page where I can access it.

rows is an array of excel sheet rows fetched from an API

I am receiving this error

DataCloneError: Failed to execute 'pushState' on 'History': Storage object could not be cloned.

The code of the file is:

class UserLocation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '',data:[]};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({value: event.target.value});
  }
  
  componentDidMount(){
    getRow(){
     //rows fetched from an API
     this.setState({data:rows});
    }
    getRow();
  }

  render() {
    return (
      <div className="District">
        <div className="DistrictBar">
          <form onSubmit={this.handleSubmit}>
            <label>
              Enter District:
              <input type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <Link to={{pathname:"/district",state:{state:window.localStorage}}}><button><input type="submit" value="Submit" /></button></Link>
          </form>
          </div>
      </div>
    );
  }
}

export default UserLocation;