How to use an image for a placemarcs in React Yandex Maps?

Question

Can you please tell me if it is possible to use your own image for marking on the map in React Yandex Maps? Right now I am using Circle which receives coordinates. How can you use an image instead, with a width and height of 25 pixels? Below is my map code:

import React, { Fragment } from 'react';
import { Col, Row } from 'antd';
import { YMaps, Map, Circle, Placemark } from 'react-yandex-maps';
import { useQuery } from 'urql';
import fap from '../../src/img/fap.png';
// import ItemContent from '../components/ItemContent';

function Monitoring(props) {
  const [res, executeQuery] = useQuery({
    query: `
      query {
        items {
          _id
          name
          coordx
          coordy
        }
      }
    `,
  });
  if (res.fetching) return <p>Loading...</p>;
  if (res.error) return <p>Errored!</p>;
  const { items } = res.data;
  return (
    <Fragment>
      <Row>
        <Col span={15}>
          <div id="Map_Container">
            <YMaps>
              <Map
                id='map'
                defaultState={{ center: [43.00, 40.97], zoom: 9 }}
                height={700}
                width={'100%'}
              >
                <h3 className='content-title'>Мониторинг на карте</h3>
                {items.map(item => (
                  <Circle
                    geometry={[[item.coordx, item.coordy], 1500]}
                    options={{
                      draggable: true,
                      fillColor: '#DB709377',
                      strokeColor: '#990066',
                      strokeOpacity: 0.8,
                      strokeWidth: 1,
                    }}
                    // onClick={e => console.log(e.get('coords'))}
                    // onClick={() => setId(item._id)}
                  />
                ))}
              </Map>
            </YMaps>
          </div>
        </Col>
        <Col span={8} offset={1}>
          {/* <ItemContent _id={itemId} /> */}
        </Col>
      </Row>
      <div className="content">
        <h3 className="content-title">Инструкция по мониторингу</h3>
        <div className="content-data">
          <p>Объекты мониторинга представлены на карте. Для получения информации по каждому из них кликните по кружочку, и после этого информация в колонке справа обновится.</p>
          <img src={fap} alt=""/>
        </div>
      </div>
    </Fragment>
  );
}

export default Monitoring;

Thank you for attention!

Answer 1

example:

import placemarkIcon from 'assets/your_icon.png';
<Placemark options={{
  iconLayout: "default#image",
  iconImageHref: placemarkIcon,
  iconImageSize: [32, 32],
 }}/>