It is not possible to add html elements via js to React (not displayed)

Html elements that I am trying to add via js are not displayed. There is no error, they are simply not displayed. If you add an element directly to the same place, then everything works as it should. I also tried adding standard javascript before I started using the library.

import React from "react";
import './SearchPower.css';
import './SearchPowerMobile.css';
import { YMaps, Map, Placemark} from '@pbe/react-yandex-maps';
import { Parser } from 'html-to-react'

function App() {
  // Определение геопозиции пользователя 
  var getLocationPromise = new Promise((resolve) => {
    navigator.geolocation.getCurrentPosition(async function (position) {
    resolve([position.coords.latitude, position.coords.longitude])
    })
  })
    var [lat, setLat] = React.useState(0)
    var [lng, setLng] = React.useState(0)
  getLocationPromise.then((location) => {
    setLat(location[0])
    setLng(location[1])
  })
  if (lat == 0 && lng == 0) {
    lat = 55.75
    lng = 37.57 }

  // Создание карты
  var myMap = React.useMemo(
    () => ({ center: [lat, lng], zoom: 9 })
  );
  
      const obj1 = {lt: 55.75, lg: 37.57}
      const obj2 = {lt: 50.75, lg: 20.57}
      const obj3 = {lt: 40.75, lg: 30.57}

      var geoObject = [obj1, obj2, obj3]

      var Placemarks = '<Placemark geometry={[53.75, 25.57]}></Placemark>'

      for (var i = 0; i < geoObject.length; i++) {
        Placemarks += '<Placemark geometry={[' + geoObject[i].lt + ',' + geoObject[i].lg + ']}></Placemark>'
      }
    return (
          <YMaps>
          <Map style={{width: '100%', height: '100%', margin: '0 0 10px 0', border: '3px solid #4D4AFF'}} state={myMap}>
              <Placemark geometry={[lat, lng]} 
                  options={{
                    iconLayout: 'default#image',
                    iconImageHref: imageHref,
                    iconImageSize: [40, 40],
                    iconImageOffset: [0, 0],
                    iconOffset: [-5, -38]
                  }} id="myPosition"></Placemark>
                <div>
                  {Parser().parse(Placemarks)} // Points on the map should be displayed here, but nothing happens
                </div>
          </Map>
          </YMaps>
        </div>
        )
    }
    export default App;

>Solution :

It looks like you are trying to add a Placemark component to your React application using a string. In React this is not the appropriate way to handle this situation. Instead you should use JSX and map over your array of objects to render the Placemark components.

Try this,

import React, { useState, useEffect, useMemo } from "react";
import "./SearchPower.css";
import "./SearchPowerMobile.css";
import { YMaps, Map, Placemark } from "@pbe/react-yandex-maps";

function App() {
  const [lat, setLat] = useState(0);
  const [lng, setLng] = useState(0);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setLat(position.coords.latitude);
        setLng(position.coords.longitude);
      },
      (error) => {
        console.error("Error retrieving user location:", error);
        setLat(55.75);
        setLng(37.57);
      }
    );
  }, []);

  const myMap = useMemo(() => ({ center: [lat, lng], zoom: 9 }), [lat, lng]);

  const geoObjects = [
    { lt: 55.75, lg: 37.57 },
    { lt: 50.75, lg: 20.57 },
    { lt: 40.75, lg: 30.57 },
  ];

  return (
    <YMaps>
      <Map state={myMap}>
        {geoObjects.map((obj, index) => (
          <Placemark key={index} geometry={[obj.lt, obj.lg]} />
        ))}
      </Map>
    </YMaps>
  );
}

export default App;