Type 'MutableRefObject<Driver | null>' is missing the following properties from type 'Driver': show, hide, toggle, shown, and 2 more

Hi can someone help me know which problem with me, I just learning Ts:

• Driver.ts:

export interface DriverState {
  // sender bottom
  bottom: number
  driver: Driver | null
  // setDriver: React.Dispatch<React.SetStateAction<Driver | undefined>>
  // setTranslateY: React.Dispatch<React.SetStateAction<Animated.Value>>
  setDriver: any
  setTranslateY: any
}

export interface Driver {
  show: (state: DriverState) => void
  hide: (state: DriverState) => void
  toggle: (state: DriverState) => void
  shown: boolean
  height: number
  name: string
}

• index.ts:

const driver = useRef<Driver | null>(null)
  const translateY = useRef(new Animated.Value(0))

  const setDriver = (newDiver : Driver) => {
    driver.current = newDiver
  }

  const setTranslateY = (newTranslateY : React.RefObject<any>) => {
    translateY.current = newTranslateY.current
  }

  const driverState : DriverState = { bottom, driver.current, setDriver, setTranslateY }

Here is the error I have got:

Error text:

Type 'MutableRefObject<Driver | null>' is missing the following properties from type 'Driver': show, hide, toggle, shown, and 2 more.ts(2740) Driver.ts(7, 3): The expected type comes from property 'driver' which is declared here on type 'DriverState' (property) DriverState.driver: Driver | null

>Solution :

The error is in this line:

const driverState : DriverState = { bottom, driver.current, setDriver, setTranslateY }

specifically the driver.current

If Driver state that was received on the function setDriver is actually the same as the defined type as expected in DriverState, I think what you’re looking for is to just pass the current ref into it, instead of just directly putting without the key like below:

const driverState : DriverState = {
  bottom,
  driver: driver.current, // note I added `driver` key here
  setDriver,
  setTranslateY
}