Для того чтобы удерживать пин в центре экрана при движении карты, можно использовать следующую схему:
1. Создать состояние в компоненте, в котором будет храниться позиция пина на карте (например, latitude и longitude).
```javascript
const [pinPosition, setPinPosition] = useState({ latitude: 55.753215, longitude: 37.622504 });
```
2. Создать обработчик события перемещения карты. В этом обработчике будет обновляться позиция пина в состоянии компонента.
```javascript
const handleMapMove = (e) => {
setPinPosition({ latitude: e.get('newCenter')[0], longitude: e.get('newCenter')[1] });
};
```
3. В компоненте карты (из библиотеки react-yandex-maps) добавить обработчик события перемещения карты и передать ему созданный обработчик.
```javascript
<YMaps>
<Map
onActionEnd={handleMapMove}
... другие пропсы ...
>
<Placemark geometry={pinPosition} />
</Map>
</YMaps>
```
Таким образом, при перемещении карты, позиция пина будет обновляться автоматически, что позволит удерживать его в центре экрана.
Что касается использования библиотеки react-yandex-maps, вам необходимо установить ее с помощью npm или yarn:
```
npm install react-yandex-maps
```
Затем импортировать ее в свой компонент:
```javascript
import { YMaps, Map, Placemark } from 'react-yandex-maps';
```
После этого можно рендерить компоненты карты, используя соответствующие теги из библиотеки.
```javascript
<YMaps>
<Map defaultState={{ center: [55.753215, 37.622504], zoom: 10 }}>
<Placemark geometry={[55.753215, 37.622504]} />
</Map>
</YMaps>
```
Указанный пример демонстрирует рендеринг простой карты с пином в центре. Вы можете настроить карту и пин с помощью различных пропсов и параметров, которые предоставляет библиотека.