I am developing a component library for the components we use in common in our projects.For now only one button has been added.

-> main_folder -> lib -> Button -> index.jsx

export function Button(){
    return <button>Deneme</button>
}

-> main_folder -> lib -> main.js

export { Button } from './components/Button/index.jsx'

I'm getting build with Vite with library mode

-> main_folder -> vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';

// /config/
export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'salaui',
      formats: ['es']
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
    }
  }
})

and this is my package.json

{
  "name": "salaui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "salaui": "file:"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "vite": "^6.2.0"
  },
  "main": "dist/salaui.js",
  "files": [
    "dist"
  ]
}

I have a problem like this, when I add the button () I created to a project I created using vite, I can work smoothly, but when I add it to an old project, I cannot use it. I get the following error;

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

• This is from old project (webpack)

this is webpack.dev.js used in this old project

const { merge } = require('webpack-merge');
const common = require('./webpackmon');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 3100,
    https: true,
    host: 'localhost',
    historyApiFallback: true,
    hot: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    }
  }
});

• This is from new project (vite)

Could someone help me figure it out? Thanks a lot!