components/TSODiffOption/Option.tsx

import { CLabel, CSelect } from '@coreui/react'
import React from 'react'
import { useSelector } from 'react-redux'

interface OptionPros {
  handleChangeType: (e: any) => void
}

const Option = ({ handleChangeType }: OptionPros) => {
  // const { routesByRailroad } = useSelector((state: any) => state.portalData)
  const {
    routesByRailroad: { data: routesData }
  } = useSelector((state: any) => state.portalData!)

  return (
    <div className="flex gap-4">
      <div className="w-[20%]">
        <CLabel
          key="routeId"
          className="flex justify-center w-full font-semibold"
        >
          Route
        </CLabel>
        <CSelect className=" text-center text-align-last-center w-full">
          {routesData?.map((item: any, index: number) => (
            <option className="text-left" value={item?.route_id} key={index}>
              {item?.route_name}
            </option>
          ))}
        </CSelect>
      </div>
      <div>
        <CLabel
          key="routeId"
          className="flex justify-center w-full font-semibold"
        >
          Mode
        </CLabel>
        <CSelect
          className=" text-center text-align-last-center w-full"
          onChange={handleChangeType}
        >
          <option className="text-left" value="compareWithDB">
            Compare with current data
          </option>
          <option className="text-left" value="compareTwoFiles">
            Compare 2 files
          </option>
          <option className="text-left" value="viewFile">
            View file
          </option>
        </CSelect>
      </div>
    </div>
  )
}

export default Option