How to use the @react-pdf/renderer.Font.register function in @react-pdf/renderer

import React, { PureComponent } from "react"
import PropTypes from "prop-types"
import { Document, Font, Image, Page, StyleSheet } from "@react-pdf/renderer"

import Side from "./Side"

Font.register({
  family: "Montserrat",
  src: "/fonts/montserrat.ttf",
})

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    fontFamily: "Montserrat",
    backgroundColor: "#E4E4E4",
  },
  image: {
    width: "80%",
  },
})

export default class Test extends PureComponent {

import { Document, Font } from '@react-pdf/renderer'
import FrontPage from './FrontPage'
import BasicInformation from './BasicInformation'
import Pastures from './Pastures'
import Schedules from './Schedules'
import MinisterIssues from './MinisterIssues'
import AdditionalRequirements from './AdditionalRequirements'
import InvasivePlants from './InvasivePlants'

import latoRegular from './fonts/Lato-Regular.ttf'
import latoItalic from './fonts/Lato-Italic.ttf'
import latoBold from './fonts/Lato-Bold.ttf'
import latoBlack from './fonts/Lato-Black.ttf'
import ManagementConsiderations from './ManagementConsiderations'

Font.register({
  family: 'Lato',
  fonts: [
    { src: latoRegular },
    { src: latoItalic, fontStyle: 'italic' },
    { src: latoBold, fontWeight: 'bold' },
    { src: latoBlack, fontWeight: 'heavy' }
  ]
})

const RUPDocument = ({ plan }) => {
  if (!plan) return 

  return (