Not able to send the selected Object to the Other components in react js

Question

I am trying to send the selected Object to the Other components from the ComponentMap in the div.rightComponent but I am getting this error

Uncaught Error: Objects are not valid as a React child (found: object with keys {image, component, series_name, series_link, series_description}). If you meant to render a collection of children, use an array instead.

function SeriesMenu() {
  const [loading, setLoading] = useState(false);
  const [jsonObjects, setJsonObjects] = useState([]);
  const endpoint = "http://localhost:8080/series/serieslist"; // Replace with the actual endpoint URL

  useEffect(() => {
    const seriesData = async () => {
      setLoading(true);
      fetch(endpoint)
        .then((response) => response.json())
        .then((data) => {
          setJsonObjects(data);
        })
        .finally(() => {
          setLoading(false);
        });
    };
    seriesData();
  }, []);

  const [selectedObject, setSelectedObject] = useState();
  const [activeComponent, setActiveComponent] = useState(
    <SeriesOverview selectedObject={selectedObject} />
  );

  const handleClick = (component, index) => {
    if (component) {
      setActiveComponent(component);
      
      const updatedJsonObjects = [...jsonObjects];
      const selected = updatedJsonObjects.splice(index, 1)[0];
      updatedJsonObjects.unshift(selected);

      console.log("Selected Object:", selected); // Debug: Log the selected object

      setJsonObjects(updatedJsonObjects);
      setSelectedObject(selected);
      console.log("New selectedObject state:", selectedObject); // Debug: Log the updated selectedObject state

    }
  };

  const handleSelectionChange = (index) => {
    setSelectedObject(jsonObjects[index]);
    handleClick(componentMap[selectedObject.component],index);
  };

  const componentMap = {
    SeriesOverview: SeriesOverview,
    SeriesMatches: SeriesMatches,
    SeriesSquads: SeriesSquads,
    SeriesStats: SeriesStats,
    SeriesNews: SeriesNews,
    SeriesInfo: SeriesInfo,
  };

  return (
    <div className="seriesMenuContainer">
      {loading ? (
        <h4>Loading...</h4>
      ) : (
        jsonObjects.length > 0 && (
          <>
            <div className="seriesMenuMainDiv">
              {jsonObjects.map((obj, index) => (
                <div key={index}>
                  <div
                    className={`objectContainer ${
                      selectedObject === obj ? "selected" : ""
                    }`}
                    onClick={() => {
                      handleClick(componentMap[obj.component], index);
                      handleSelectionChange(index);
                    }}
                  >
                    <img src={obj.image} alt={obj.series_name} />
                    <h2>{obj.series_name}</h2>
                  </div>
                </div>
              ))}
            </div>
            <div className="rightComponent">
              <BrowserRouter>
                <SeriesNavbar />
                <Switch>
                {console.log("123:-",selectedObject)}

                  <Route exact path="/">
                    <SeriesOverview selectedObject={selectedObject}/>
                  </Route>
                  {Object.keys(componentMap).map((componentKey) => (
                    <Route
                      key={componentKey}
                      path={`/${componentKey.toLowerCase()}`}
                    >
                      {React.cloneElement(componentMap[componentKey], {
                        selectedObject: selectedObject,
                      })}
                    </Route>
                  ))}
                  <Redirect to="/" />
                </Switch>
              </BrowserRouter>
            </div>
          </>
        )
      )}
    </div>
  );
}