How to make different build with different files in ReactJs

I am trying to build reactjs app for different sites having same codebase but style changes with little component change(different component for different site for same work[same name])

When I build the app passing param say CLIENT=site1, it should take the files(css, component etc) from common files with corresponding site files and build one; if CLIENT=site2 then it will do for its files. Folder structure be like

node_modules
public
  \--index.html
src
  |--resource
  |    |--common
  |    |    |--img
  |    |    \--styles
  |    |--site1
  |    |    |--img
  |    |    \--styles
  |         \--Login.js
  
  |    \--site2
  |         |--img
  |         \--styles
  |         \--Login.js

  |--App.js
  \--index.js
package.json

I tried using customize-cra but seems no luck. tried to test config-overrides.js

const path = require('path');
const { addWebpackAlias, override } = require('customize-cra')

const resolveApp = relativePath => path.resolve(__dirname, relativePath)

module.exports = override()(
    addWebpackAlias({
        '@': path.resolve(__dirname, './src/'),
        "@a": path.resolve(__dirname, `./src/resource/${process.env.CLIENT}`),
    }),
);

 "scripts": {
       "start:build1": "set CLIENT=site1  && react-app-rewired start",
  },

just to test App.js

import './App.css';
import A from '@a/Login';

function App() {

  return (
    <div className="App">
    sss
    <Login/>
    </div>
  );
}

export default App;

But giving error like Module not found: Can't resolve '@app/Login' in

Where is the issue. Please guide