diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx
index c38241b275ba..aaa43e33744d 100644
--- a/src/components/ConfirmedRoute.tsx
+++ b/src/components/ConfirmedRoute.tsx
@@ -15,14 +15,9 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import DistanceMapView from './DistanceMapView';
 import * as Expensicons from './Icon/Expensicons';
 import ImageSVG from './ImageSVG';
+import type {WayPoint} from './MapView/MapViewTypes';
 import PendingMapView from './MapView/PendingMapView';
 
-type WayPoint = {
-    id: string;
-    coordinate: [number, number];
-    markerComponent: () => ReactNode;
-};
-
 type ConfirmedRoutePropsOnyxProps = {
     /** Data about Mapbox token for calling Mapbox API */
     mapboxAccessToken: OnyxEntry<MapboxAccessToken>;
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.tsx
similarity index 65%
rename from src/components/DistanceRequest/DistanceRequestFooter.js
rename to src/components/DistanceRequest/DistanceRequestFooter.tsx
index cb164917cd57..357074478bd8 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx
@@ -1,77 +1,61 @@
-import lodashGet from 'lodash/get';
-import lodashIsNil from 'lodash/isNil';
-import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
+import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
 import DistanceMapView from '@components/DistanceMapView';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
-import transactionPropTypes from '@components/transactionPropTypes';
+import type {WayPoint} from '@components/MapView/MapViewTypes';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {MapboxAccessToken} from '@src/types/onyx';
+import type {WaypointCollection} from '@src/types/onyx/Transaction';
+import type Transaction from '@src/types/onyx/Transaction';
+import type IconAsset from '@src/types/utils/IconAsset';
 
 const MAX_WAYPOINTS = 25;
 
-const propTypes = {
+type DistanceRequestFooterOnyxProps = {
+    /** Data about Mapbox token for calling Mapbox API */
+    mapboxAccessToken: OnyxEntry<MapboxAccessToken>;
+};
+
+type DistanceRequestFooterProps = DistanceRequestFooterOnyxProps & {
     /** The waypoints for the distance request */
-    waypoints: PropTypes.objectOf(
-        PropTypes.shape({
-            lat: PropTypes.number,
-            lng: PropTypes.number,
-            address: PropTypes.string,
-            name: PropTypes.string,
-        }),
-    ),
+    waypoints?: WaypointCollection;
 
     /** Function to call when the user wants to add a new waypoint */
-    navigateToWaypointEditPage: PropTypes.func.isRequired,
-
-    /** Data about Mapbox token for calling Mapbox API */
-    mapboxAccessToken: PropTypes.shape({
-        /** Temporary token for Mapbox API */
-        token: PropTypes.string,
-
-        /** Time when the token will expire in ISO 8601 */
-        expiration: PropTypes.string,
-    }),
+    navigateToWaypointEditPage: (index: number) => void;
 
     /** The transaction being interacted with */
-    transaction: transactionPropTypes,
+    transaction: OnyxEntry<Transaction>;
 };
 
-const defaultProps = {
-    waypoints: {},
-    mapboxAccessToken: {
-        token: '',
-    },
-    transaction: {},
-};
-function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage}) {
+function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage}: DistanceRequestFooterProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const numberOfWaypoints = _.size(waypoints);
-    const numberOfFilledWaypoints = _.size(_.filter(waypoints, (waypoint) => !_.isEmpty(waypoint)));
+    const numberOfWaypoints = Object.keys(waypoints ?? {}).length;
+    const numberOfFilledWaypoints = Object.values(waypoints ?? {}).filter((waypoint) => Object.keys(waypoint).length).length;
     const lastWaypointIndex = numberOfWaypoints - 1;
 
     const waypointMarkers = useMemo(
         () =>
-            _.filter(
-                _.map(waypoints, (waypoint, key) => {
-                    if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
+            Object.entries(waypoints ?? {})
+                .map(([key, waypoint]) => {
+                    if (!waypoint?.lat || !waypoint?.lng) {
                         return;
                     }
 
                     const index = TransactionUtils.getWaypointIndex(key);
-                    let MarkerComponent;
+                    let MarkerComponent: IconAsset;
                     if (index === 0) {
                         MarkerComponent = Expensicons.DotIndicatorUnfilled;
                     } else if (index === lastWaypointIndex) {
@@ -82,8 +66,8 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
 
                     return {
                         id: `${waypoint.lng},${waypoint.lat},${index}`,
-                        coordinate: [waypoint.lng, waypoint.lat],
-                        markerComponent: () => (
+                        coordinate: [waypoint.lng, waypoint.lat] as const,
+                        markerComponent: (): ReactNode => (
                             <ImageSVG
                                 src={MarkerComponent}
                                 width={CONST.MAP_MARKER_SIZE}
@@ -92,9 +76,8 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
                             />
                         ),
                     };
-                }),
-                (waypoint) => waypoint,
-            ),
+                })
+                .filter((waypoint): waypoint is WayPoint => !!waypoint),
         [waypoints, lastWaypointIndex, theme.icon],
     );
 
@@ -105,7 +88,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
                     <Button
                         small
                         icon={Expensicons.Plus}
-                        onPress={() => navigateToWaypointEditPage(_.size(lodashGet(transaction, 'comment.waypoints', {})))}
+                        onPress={() => navigateToWaypointEditPage(Object.keys(transaction?.comment?.waypoints ?? {}).length)}
                         text={translate('distance.addStop')}
                         isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
                         innerStyles={[styles.ph10]}
@@ -114,14 +97,14 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
             )}
             <View style={styles.mapViewContainer}>
                 <DistanceMapView
-                    accessToken={mapboxAccessToken.token}
+                    accessToken={mapboxAccessToken?.token ?? ''}
                     mapPadding={CONST.MAPBOX.PADDING}
                     pitchEnabled={false}
                     initialState={{
                         zoom: CONST.MAPBOX.DEFAULT_ZOOM,
-                        location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
+                        location: waypointMarkers?.[0]?.coordinate ?? (CONST.MAPBOX.DEFAULT_COORDINATE as [number, number]),
                     }}
-                    directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])}
+                    directionCoordinates={(transaction?.routes?.route0?.geometry?.coordinates as Array<[number, number]>) ?? []}
                     style={[styles.mapView, styles.mapEditView]}
                     waypoints={waypointMarkers}
                     styleURL={CONST.MAPBOX.STYLE_URL}
@@ -133,10 +116,8 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
 }
 
 DistanceRequestFooter.displayName = 'DistanceRequestFooter';
-DistanceRequestFooter.propTypes = propTypes;
-DistanceRequestFooter.defaultProps = defaultProps;
 
-export default withOnyx({
+export default withOnyx<DistanceRequestFooterProps, DistanceRequestFooterOnyxProps>({
     mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
     },
diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.tsx
similarity index 61%
rename from src/components/DistanceRequest/DistanceRequestRenderItem.js
rename to src/components/DistanceRequest/DistanceRequestRenderItem.tsx
index 2aa2ac58f379..a1f3efbf0291 100644
--- a/src/components/DistanceRequest/DistanceRequestRenderItem.js
+++ b/src/components/DistanceRequest/DistanceRequestRenderItem.tsx
@@ -1,59 +1,41 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
-import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
+import type {TranslationPaths} from '@src/languages/types';
+import type {WaypointCollection} from '@src/types/onyx/Transaction';
 
-const propTypes = {
+type DistanceRequestProps = {
     /** The waypoints for the distance request */
-    waypoints: PropTypes.objectOf(
-        PropTypes.shape({
-            lat: PropTypes.number,
-            lng: PropTypes.number,
-            address: PropTypes.string,
-            name: PropTypes.string,
-        }),
-    ),
+    waypoints?: WaypointCollection;
 
     /** The index of the item */
-    item: PropTypes.string,
+    item?: string;
 
     /** Function to call when the secondary interaction is triggered */
-    onSecondaryInteraction: PropTypes.func,
+    onSecondaryInteraction?: () => void;
 
     /** Function to get the index of the item */
-    getIndex: PropTypes.func,
+    getIndex?: () => number;
 
     /** Whether the item is active */
-    isActive: PropTypes.bool,
+    isActive?: boolean;
 
     /** Function to call when the user clicks the item */
-    onPress: PropTypes.func,
+    onPress?: (index: number) => void;
 
     /** Whether the item is disabled */
-    disabled: PropTypes.bool,
+    disabled?: boolean;
 };
 
-const defaultProps = {
-    waypoints: {},
-    item: '',
-    onSecondaryInteraction: () => {},
-    getIndex: () => {},
-    isActive: false,
-    onPress: () => {},
-    disabled: false,
-};
-
-function DistanceRequestRenderItem({waypoints, item, onSecondaryInteraction, getIndex, isActive, onPress, disabled}) {
+function DistanceRequestRenderItem({waypoints, item = '', onSecondaryInteraction, getIndex, isActive = false, onPress = () => {}, disabled = false}: DistanceRequestProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
-    const numberOfWaypoints = _.size(waypoints);
+    const numberOfWaypoints = Object.keys(waypoints ?? {}).length;
     const lastWaypointIndex = numberOfWaypoints - 1;
 
-    const index = getIndex();
+    const index = getIndex?.() ?? -1;
     let descriptionKey = 'distance.waypointDescription.';
     let waypointIcon;
     if (index === 0) {
@@ -67,12 +49,13 @@ function DistanceRequestRenderItem({waypoints, item, onSecondaryInteraction, get
         waypointIcon = Expensicons.DotIndicator;
     }
 
-    const waypoint = lodashGet(waypoints, [`waypoint${index}`], {});
+    const waypoint = waypoints?.[`waypoint${index}`] ?? {};
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const title = waypoint.name || waypoint.address;
 
     return (
         <MenuItemWithTopDescription
-            description={translate(descriptionKey)}
+            description={translate(descriptionKey as TranslationPaths)}
             title={title}
             icon={Expensicons.DragHandles}
             iconFill={theme.icon}
@@ -89,7 +72,5 @@ function DistanceRequestRenderItem({waypoints, item, onSecondaryInteraction, get
 }
 
 DistanceRequestRenderItem.displayName = 'DistanceRequestRenderItem';
-DistanceRequestRenderItem.propTypes = propTypes;
-DistanceRequestRenderItem.defaultProps = defaultProps;
 
 export default DistanceRequestRenderItem;
diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.tsx
similarity index 67%
rename from src/components/DistanceRequest/index.js
rename to src/components/DistanceRequest/index.tsx
index eafc36a57927..29987f716565 100644
--- a/src/components/DistanceRequest/index.js
+++ b/src/components/DistanceRequest/index.tsx
@@ -1,16 +1,17 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {RouteProp} from '@react-navigation/native';
+import lodashIsEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import type {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import DraggableList from '@components/DraggableList';
+import type {DraggableListData} from '@components/DraggableList/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
@@ -19,82 +20,74 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import reportPropTypes from '@pages/reportPropTypes';
-import variables from '@styles/variables';
 import * as MapboxToken from '@userActions/MapboxToken';
-import * as Transaction from '@userActions/Transaction';
+import * as TransactionUserActions from '@userActions/Transaction';
 import * as TransactionEdit from '@userActions/TransactionEdit';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Report, Transaction} from '@src/types/onyx';
+import type {WaypointCollection} from '@src/types/onyx/Transaction';
 import DistanceRequestFooter from './DistanceRequestFooter';
 import DistanceRequestRenderItem from './DistanceRequestRenderItem';
 
-const propTypes = {
-    /** The transactionID of this request */
-    transactionID: PropTypes.string,
+type DistanceRequestOnyxProps = {
+    transaction: OnyxEntry<Transaction>;
+};
+
+type DistanceRequestProps = DistanceRequestOnyxProps & {
+    /** The TransactionID of this request */
+    transactionID?: string;
 
     /** The report to which the distance request is associated */
-    report: reportPropTypes,
+    report: OnyxEntry<Report>;
 
     /** Are we editing an existing distance request, or creating a new one? */
-    isEditingRequest: PropTypes.bool,
+    isEditingRequest?: boolean;
 
     /** Are we editing the distance while creating a new distance request */
-    isEditingNewRequest: PropTypes.bool,
+    isEditingNewRequest?: boolean;
 
     /** Called on submit of this page */
-    onSubmit: PropTypes.func.isRequired,
-
-    /* Onyx Props */
-    transaction: transactionPropTypes,
+    onSubmit: (waypoints?: WaypointCollection) => void;
 
     /** React Navigation route */
-    route: PropTypes.shape({
+    route: RouteProp<{
         /** Params from the route */
-        params: PropTypes.shape({
+        params: {
             /** The type of IOU report, i.e. bill, request, send */
-            iouType: PropTypes.string,
-
+            iouType: string;
             /** The report ID of the IOU */
-            reportID: PropTypes.string,
-        }),
-    }).isRequired,
-};
-
-const defaultProps = {
-    transactionID: '',
-    report: {},
-    isEditingRequest: false,
-    isEditingNewRequest: false,
-    transaction: {},
+            reportID: string;
+        };
+    }>;
 };
 
-function DistanceRequest({transactionID, report, transaction, route, isEditingRequest, isEditingNewRequest, onSubmit}) {
+function DistanceRequest({transactionID = '', report, transaction, route, isEditingRequest = false, isEditingNewRequest = false, onSubmit}: DistanceRequestProps) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
-    const [optimisticWaypoints, setOptimisticWaypoints] = useState(null);
+    const [optimisticWaypoints, setOptimisticWaypoints] = useState<WaypointCollection>();
     const [hasError, setHasError] = useState(false);
-    const reportID = lodashGet(report, 'reportID', '');
-    const waypoints = useMemo(() => optimisticWaypoints || lodashGet(transaction, 'comment.waypoints', {waypoint0: {}, waypoint1: {}}), [optimisticWaypoints, transaction]);
-    const waypointsList = _.keys(waypoints);
-    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = report?.reportID ?? '';
+    const waypoints: WaypointCollection = useMemo(() => optimisticWaypoints ?? transaction?.comment?.waypoints ?? {waypoint0: {}, waypoint1: {}}, [optimisticWaypoints, transaction]);
+    const waypointsList = Object.keys(waypoints);
+    const iouType = route?.params?.iouType ?? '';
     const previousWaypoints = usePrevious(waypoints);
-    const numberOfWaypoints = _.size(waypoints);
-    const numberOfPreviousWaypoints = _.size(previousWaypoints);
-    const scrollViewRef = useRef(null);
-
-    const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
-    const isLoading = lodashGet(transaction, 'isLoading', false);
-    const hasRouteError = !!lodashGet(transaction, 'errorFields.route');
-    const hasRoute = TransactionUtils.hasRoute(transaction);
+    const numberOfWaypoints = Object.keys(waypoints).length;
+    const numberOfPreviousWaypoints = Object.keys(previousWaypoints).length;
+    const scrollViewRef = useRef<ScrollView>(null);
+
+    const isLoadingRoute = transaction?.comment?.isLoading ?? false;
+    const isLoading = transaction?.isLoading ?? false;
+    const hasRouteError = Boolean(transaction?.errorFields?.route);
+    const hasRoute = TransactionUtils.hasRoute((transaction ?? {}) as Transaction);
     const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
     const previousValidatedWaypoints = usePrevious(validatedWaypoints);
-    const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints);
+    const haveValidatedWaypointsChanged = !lodashIsEqual(previousValidatedWaypoints, validatedWaypoints);
     const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
-    const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
+    const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && Object.keys(validatedWaypoints).length > 1;
     const transactionWasSaved = useRef(false);
 
     useEffect(() => {
@@ -120,19 +113,19 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
             if (transactionWasSaved.current) {
                 return;
             }
-            TransactionEdit.restoreOriginalTransactionFromBackup(transaction.transactionID);
+            TransactionEdit.restoreOriginalTransactionFromBackup(transaction?.transactionID ?? '');
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
-        const transactionWaypoints = lodashGet(transaction, 'comment.waypoints', {});
-        if (!lodashGet(transaction, 'transactionID') || !_.isEmpty(transactionWaypoints)) {
+        const transactionWaypoints = transaction?.comment?.waypoints ?? {};
+        if (!transaction?.transactionID || Object.keys(transactionWaypoints).length) {
             return;
         }
 
         // Create the initial start and stop waypoints
-        Transaction.createInitialWaypoints(transactionID);
+        TransactionUserActions.createInitialWaypoints(transactionID);
         return () => {
             // Whenever we reset the transaction, we need to set errors as empty/false.
             setHasError(false);
@@ -140,23 +133,24 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
     }, [transaction, transactionID]);
 
     useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (isOffline || !shouldFetchRoute) {
             return;
         }
 
-        Transaction.getRoute(transactionID, validatedWaypoints);
+        TransactionUserActions.getRoute(transactionID, validatedWaypoints);
     }, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline]);
 
     useEffect(() => {
         if (numberOfWaypoints <= numberOfPreviousWaypoints) {
             return;
         }
-        scrollViewRef.current.scrollToEnd({animated: true});
+        scrollViewRef.current?.scrollToEnd({animated: true});
     }, [numberOfPreviousWaypoints, numberOfWaypoints]);
 
     useEffect(() => {
         // Whenever we change waypoints we need to remove the error or it will keep showing the error.
-        if (_.isEqual(previousWaypoints, waypoints)) {
+        if (lodashIsEqual(previousWaypoints, waypoints)) {
             return;
         }
         setHasError(false);
@@ -168,40 +162,48 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
 
     /**
      * Takes the user to the page for editing a specific waypoint
-     * @param {Number} index of the waypoint to edit
      */
-    const navigateToWaypointEditPage = (index) => {
+    const navigateToWaypointEditPage = (index: number) => {
         Navigation.navigate(
-            ROUTES.MONEY_REQUEST_STEP_WAYPOINT.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transactionID, report.reportID, index, Navigation.getActiveRouteWithoutParams()),
+            ROUTES.MONEY_REQUEST_STEP_WAYPOINT.getRoute(
+                CONST.IOU.ACTION.EDIT,
+                CONST.IOU.TYPE.REQUEST,
+                transactionID,
+                report?.reportID ?? '',
+                index.toString(),
+                Navigation.getActiveRouteWithoutParams(),
+            ),
         );
     };
 
     const getError = () => {
         // Get route error if available else show the invalid number of waypoints error.
         if (hasRouteError) {
-            return ErrorUtils.getLatestErrorField(transaction, 'route');
+            return ErrorUtils.getLatestErrorField((transaction ?? {}) as Transaction, 'route');
         }
 
-        if (_.size(validatedWaypoints) < 2) {
+        if (Object.keys(validatedWaypoints).length < 2) {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             return {0: 'iou.error.atLeastTwoDifferentWaypoints'};
         }
+        return {};
     };
 
     const updateWaypoints = useCallback(
-        ({data}) => {
-            if (_.isEqual(waypointsList, data)) {
+        ({data}: DraggableListData<string>) => {
+            if (lodashIsEqual(waypointsList, data)) {
                 return;
             }
 
-            const newWaypoints = {};
-            _.each(data, (waypoint, index) => {
-                newWaypoints[`waypoint${index}`] = lodashGet(waypoints, waypoint, {});
+            const newWaypoints: WaypointCollection = {};
+            data.forEach((waypoint, index) => {
+                newWaypoints[`waypoint${index}`] = waypoints?.[waypoint] ?? {};
             });
 
             setOptimisticWaypoints(newWaypoints);
             // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
-            Transaction.updateWaypoints(transactionID, newWaypoints).then(() => {
-                setOptimisticWaypoints(null);
+            TransactionUserActions.updateWaypoints(transactionID, newWaypoints).then(() => {
+                setOptimisticWaypoints(undefined);
             });
         },
         [transactionID, waypoints, waypointsList],
@@ -209,7 +211,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
 
     const submitWaypoints = useCallback(() => {
         // If there is any error or loading state, don't let user go to next page.
-        if (_.size(validatedWaypoints) < 2 || hasRouteError || isLoadingRoute || (isLoading && !isOffline)) {
+        if (Object.keys(validatedWaypoints).length < 2 || hasRouteError || isLoadingRoute || (isLoading && !isOffline)) {
             setHasError(true);
             return;
         }
@@ -229,7 +231,6 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
                     keyExtractor={(item) => item}
                     shouldUsePortal
                     onDragEnd={updateWaypoints}
-                    scrollEventThrottle={variables.distanceScrollEventThrottle}
                     ref={scrollViewRef}
                     renderItem={({item, drag, isActive, getIndex}) => (
                         <DistanceRequestRenderItem
@@ -237,7 +238,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
                             item={item}
                             onSecondaryInteraction={drag}
                             isActive={isActive}
-                            getIndex={getIndex}
+                            getIndex={getIndex as () => number}
                             onPress={navigateToWaypointEditPage}
                             disabled={isLoadingRoute}
                         />
@@ -245,16 +246,15 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
                     ListFooterComponent={
                         <DistanceRequestFooter
                             waypoints={waypoints}
-                            hasRouteError={hasRouteError}
                             navigateToWaypointEditPage={navigateToWaypointEditPage}
-                            transaction={transaction}
+                            transaction={(transaction ?? {}) as Transaction}
                         />
                     }
                 />
             </View>
             <View style={[styles.w100, styles.pt2]}>
                 {/* Show error message if there is route error or there are less than 2 routes and user has tried submitting, */}
-                {((hasError && _.size(validatedWaypoints) < 2) || hasRouteError) && (
+                {((hasError && Object.keys(validatedWaypoints).length < 2) || hasRouteError) && (
                     <DotIndicatorMessage
                         style={[styles.mh4, styles.mv3]}
                         messages={getError()}
@@ -300,10 +300,9 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
 }
 
 DistanceRequest.displayName = 'DistanceRequest';
-DistanceRequest.propTypes = propTypes;
-DistanceRequest.defaultProps = defaultProps;
-export default withOnyx({
+export default withOnyx<DistanceRequestProps, DistanceRequestOnyxProps>({
     transaction: {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID || 0}`,
     },
 })(DistanceRequest);
diff --git a/src/components/DraggableList/types.ts b/src/components/DraggableList/types.ts
index 67f54ae5d901..854829319f96 100644
--- a/src/components/DraggableList/types.ts
+++ b/src/components/DraggableList/types.ts
@@ -29,4 +29,4 @@ type DraggableListProps<T> = {
     ListFooterComponent?: React.ReactElement;
 } & DraggableListData<T>;
 
-export type {DraggableListProps, RenderItemParams};
+export type {DraggableListProps, RenderItemParams, DraggableListData};
diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts
index 4b9ab6af233b..3fa52c54339b 100644
--- a/src/components/MapView/MapViewTypes.ts
+++ b/src/components/MapView/MapViewTypes.ts
@@ -1,4 +1,4 @@
-import type {ComponentType} from 'react';
+import type {ReactNode} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 
 type MapViewProps = {
@@ -49,7 +49,7 @@ type InitialState = {
 type WayPoint = {
     id: string;
     coordinate: [number, number];
-    markerComponent: ComponentType;
+    markerComponent: () => ReactNode;
 };
 
 // Style used for the line that displays direction