Why Jotai makes a component infinitely re-render when i define the related atom as a function with parameter?

i'm trying to implement language state on my website with Jotai and React.

I tried to do something and it worked but the problem is that the the React component started to re-render infinitely.

Here is what i did :

This is a separate file i created for defining atoms,

import { atom } from "jotai";

export const languageState = atom('tr')

export const marineHeaderObject = (langState) => atom({
        buttonDataArray: [
            { label: langState === 'tr' ? 'Anasayfa' : 'Home ', path: 'home', isDropdown: false },
            { label: langState === 'tr' ? 'Kurumsal' : 'Corporate ' , path: '', isDropdown: false},
            { label: langState === 'tr' ? 'Modellerimiz' : 'Models ', path: '', isDropdown: true},
            { label: langState === 'tr' ? 'Tekne Kiralama' : 'Boat Rental ', path: '', isDropdown: false},
            { label: langState === 'tr' ? 'Güverte Kaplama' : 'Deck Covering ', path: '', isDropdown: false},
            { label: langState === 'tr' ? 'İletişim' : 'Contact ', path: 'contact', isDropdown: false},
        ],
        logoPath: ''
    }
)

This is where i use those atoms,

import { useEffect, useState } from 'react'
import { useAtom } from 'jotai'

import Header from '../../components/Header';
import { marineHeaderObject } from '../../states';
import { languageState } from '../../states';

const myPage = () => {

    const [langState] = useAtom(languageState)
    const [marineHeader] = useAtom(marineHeaderObject(langState))

    return (
        <div className="pageWrapper">
            <Header headerObject={marineHeader} />
        </div>
    );
}
 
export default myPage;

And this is the Header component below,

import NavButton from './NavButton'

const Header = ({ headerObject }) => {
    return (
        <div className="header">
            <div className="logo">
                <a> <img height="70" width="184" src="../assets/images/logov2.svg" /> </a>
            </div>
            <div className="navigationBar">
                <nav>
                    {
                        headerObject.buttonDataArray.map((button, index) => {
                            return (
                                <NavButton key={index} buttonData={button} />
                            )
                        })
                    }
                </nav>
            </div>
        </div>
    );
}
 
export default Header;

And this is what browser console gives me :

270react_devtools_backend.js:4026 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Maycotex (http://localhost:3000/main.9f8185fe9033d1ee3856.hot-update.js:36:69)
    at Routes (http://localhost:3000/static/js/bundle.js:41590:5)
    at Router (http://localhost:3000/static/js/bundle.js:41523:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:40332:5)
    at App

What's the problem here ? Why React re-renders the component infinitely ?