Error: Objects are not valid as a React child (found: object with keys {pathname, search, hash, state}). If you meant to render a collection of children, use an array instead.

Bakery.js

import React from "react";

import { Link } from "react-router-dom";

import "../Styles/Filter.css";

function Bakery(props){

return(

\<div\>

\<Link to='/details' className="btn"\>

\<div className="row result-section ms-md-3 mb-3 p-4"\>

\<div className="col-12 col-sm-12 col-md-6 col-lg-3"\>

\<img

className="thumb"

src={require("../Assets/breakfast.jpg").default}

alt="Restaurant Thumb"

/\>

\</div\>

\<div className="col-12 col-sm-12 col-md-6 col-lg-9"\>

<h3>

{props.name}</h3>


<h5>

{props.place}</h5>


<h6>

{props.location}</h6>


\</div\>

<hr className="line-break mt-3" />


\<div className="row"\>

\<div className="col-12 col-sm-12 col-lg-4"\>

\<table className="table-transparent"\>

\<thead\>

\<tr\>

\<th scope="row"\>CUISINES:\</th\>

\<td\>{props.cuisine}\</td\>

\</tr\>

\</thead\>

\<tbody\>

\<tr\>

\<th scope="row"\>COST FOR TWO:\</th\>

\<td\>{props.cost}\</td\>

\</tr\>

\</tbody\>

\</table\>

\</div\>

\</div\>

\</div\>

\</Link\>

\</div\>);

}

export default Bakery;

Filter.js

          <Bakery name="The Big Chill Cakery"  place="FORT" location="Shop 1, Plot D, Samruddhi Complex, Chincholi …" cuisine="Bakery" cost={700}/>