Reactjs 如何在字体选择器反应（npm）下拉列表中使用自定义字体（otf文件）

在我的项目中，我使用字体选择器react（NPM）进行字体样式设计，我在其中使用谷歌字体。现在，我想在下拉列表中添加自定义字体，我有用于该字体的.otf文件，还想将字体选择器分段。我该怎么做？ 下面是我的代码，我正在使用谷歌API键获取字体，有没有办法将自定义字体（导入的otf文件）放入该选择器中？任何帮助都将不胜感激，谢谢

import FontPicker from "font-picker-react";
import { useEffect, useState } from "react";

const Font = ({}) => {
  const { objects, updateObjects, selectedObject } = useCanvas();
  const [activeHeaderFontFamily, setActiveHeaderFontFamily] = useState("");

  useEffect(() => {
    if (activeHeaderFontFamily) {
      const newObjects = objects.map((object) => {
        if (object.id !== selectedObject.id) return object;

        let payload = {
          ...selectedObject,
          settings: {
            ...selectedObject.settings,
            fontFamily: activeHeaderFontFamily,
          },
        };

        return payload;
      });

      console.log(newObjects);

      updateObjects(newObjects);
    }
  }, [activeHeaderFontFamily]);

  return (
    <div className={styles.container}>
      <FontPicker
        apiKey="AIzaSyCOpaXi7JT_H9uOL3nkNVZ8h5DqgZ-GkOQ"
        activeFontFamily={activeHeaderFontFamily}
        onChange={(nextFont) => setActiveHeaderFontFamily(nextFont.family)}
      />
    </div>
  );
};

从“字体选择器”导入字体选择器；
从“react”导入{useffect，useState}；
常量字体=（{}）=>{
const{objects，updateObjects，selectedObject}=useCanvas（）；
常量[activeHeaderFontFamily，setActiveHeaderFontFamily]=useState（“”）；
useffect（（）=>{
if（activeHeaderFontFamily）{
const newObjects=objects.map（（object）=>{
如果（object.id！==selectedObject.id）返回对象；
让有效载荷={
…选定对象，
设置：{
…已选择Object.settings，
fontFamily:activeHeaderFontFamily，
},
};
返回有效载荷；
});
console.log（newObjects）；
更新对象（新对象）；
}
}，[activeHeaderFontFamily]）；
返回(
setActiveHeaderFontFamily（nextFont.family）}
/>
);
};