Accessible Map

import React, { useRef } from "react";
import "ol/ol.css";
import { Map } from "@react-ol/fiber";

export const ExampleAccessible = () => {
  const viewRef = useRef();
  return (
    <>
      <button
        onClick={() => {
          viewRef.current?.setZoom(viewRef.current.getZoom() - 1);
        }}
      >
        Zoom out
      </button>
      <button
        onClick={() => {
          viewRef.current?.setZoom(viewRef.current.getZoom() + 1);
        }}
      >
        Zoom in
      </button>
      <Map>
        <olView ref={viewRef} initialCenter={[0, 0]} initialZoom={2} />
        <olLayerTile>
          <olSourceOSM />
        </olLayerTile>
      </Map>
    </>
  );
};