React: path__WEBPACK_IMPORTED_MODULE_1__.join) is not a function

Question

I am trying to use join function from path module inside my React functional component and am getting below error - TypeError: (0 , path__WEBPACK_IMPORTED_MODULE_1__.join) is not a function

I have referred bunch of answers but they don't seem to be helping my case -

path join not working in webpack5 but it is working with webpack4

TypeError: path.join is not a function

TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function. How do I solve this?

WEBPACK_IMPORTED_MODULE_13___default(...) is not a function

TypeError: util__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function

Here's a sample code -

File: hello-component.tsx

import React, {useState, useRef, useEffect} from 'react';
import {fetchData} from 'helpers/helpers.ts';

const HelloComponent =  async ({user}) => {
  const user = await fetchData(user);
  // do stuff with useState, useRef, useEffect
  if (isUser) {
    return (<h1>Hello {user}</h1>);
  } else {
    return (<h1> {user} not found!</h1>);
  }
}

File: helpers/helpers.ts

import axios from 'axios';
import {join} from 'path';

export const fetchData = async (user: string) => {
  
  const cfp = join('config', 'configuration.yaml')  // ---> 'join' function causing error 
  const config = readFileSync(cfp, 'utf8');

  // read config using js-yaml module and do stuff...

  const resp = await axios.request({...});
  return resp;
}

File: package.json

{
  // dependencies
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

How do I get rid of the error?