React+TypeScript useRefでエラーが発生してしまう

Type 'RefObject<unknown>' is missing 
the following properties from type 'HTMLDivElement': align, addEventListener,
removeEventListener, accessKey, and 284 more.

import './Workspace.css'
import React, { useEffect, useState, useRef, MutableRefObject } from "react"
import Technology from "./Technology";
import Arrow from "./Arrow";
import {useArrow, ArrowPosRect} from "../hooks/useArrow";
import useComponentArray from "../hooks/useComponentArray";
import useTechnology from '../hooks/useTechnology';

const Workspace = (props: workspaceProps) => {
  const technologyRefs: {current: HTMLDivElement[]} = useRef<HTMLDivElement[]>([])
  const [topTechnologyId, setTopTechnologyId] = useState("")
  const [selectedNodeIds, setSelectedNodeIds] = useState<string[]>([])
  const [arrows, setArrows] = useState([])
  const [
    liftUpTechnology,
    liftDown,
    selectTechnology
  ] = useTechnology(topTechnologyId, setTopTechnologyId, selectedNodeIds, setSelectedNodeIds)
  const [getArrowProperties]: [(startElementId: string, endElementId: string) => ArrowPosRect] = useArrow(technologyRefs)
  const arrowHandler = () => {
    selectedNodeIds.forEach((selectedNodeId) => {
      const arrowProperties = getArrowProperties(topTechnologyId, selectedNodeId)
      setArrows(arrows => {return(
        [
          ...arrows, 
          <Arrow
            width={arrowProperties.rect.width}
            height={arrowProperties.rect.height}
            startPosition={[arrowProperties.positions.startPosition.x, arrowProperties.positions.startPosition.y]}
          />
        ]
      )})
    })
  }

  const resetTechnologies = () => {
    setSelectedNodeIds([])
    setTopTechnologyId(null)
  }

  return(
    <div className="workspace" onMouseDown={resetTechnologies}>
      {arrows}
      <button onMouseDown={(e) =>{
        arrowHandler()
        e.stopPropagation()
      }
      }>矢印描画</button>
        {props.technologies.map((technology, i) => {
          technologyRefs.current[i]  = React.createRef() //ここでエラー発生
          return(
            <div draggable
              onMouseDown={(e) => {
                selectTechnology(e)
                e.stopPropagation()
              }}
              onDragStart={liftUpTechnology}
              onDragEnd={liftDown}
            >
              <Technology
                name={technology.name}
                key={technology.id}
                id={technology.id}
                ref={technologyRefs.current[i]}
                selectedNodeIds={selectedNodeIds}
                topTechnologyId={topTechnologyId}
              />
            </div>
          )
        })}
    </div>
  )
}

export default Workspace

import React, { useEffect, forwardRef } from "react"

type TechnologyProps = {
  id: string;
  name: string;
  topTechnologyId: string | null;
  selectedNodeIds: string[];
};

const Technology = forwardRef<HTMLDivElement, TechnologyProps>((props: TechnologyProps, technologyRef: React.RefObject<HTMLDivElement>) => {
  useEffect(() => {
    if (technologyRef.current) {
      if (props.selectedNodeIds.includes(props.id.toString())) {
        technologyRef.current.style.border = 'dashed'
      } else {
        technologyRef.current.style.border = 'solid'
      }
      if (props.topTechnologyId == props.id) {
        technologyRef.current.style.borderColor  = "red"
      }
    }
  }, [props.topTechnologyId, props.selectedNodeIds, technologyRef])

  return (
    <>
      <div ref={technologyRef}
        className='technology'
        id={props.id}
        style={{ cursor: "pointer" }}
      >
        {props.name}
      </div>
    </>
  )
})

export default Technology