Use same usestate hook for multiple icons

Here you need to save the selected Id in the state.

import React , {useState} from 'react';
import Weather_leftpanecss from './Weather_leftpane.module.css'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

export default function Weather_leftpane() {

  const [valuestate, setvaluestate] = useState(true)
  const [id, setId] = useState(null);


  const togglearrow = (val)=>{        
    if(valuestate==true){
      setvaluestate(false)
    }else{
      setvaluestate(true)
    }
    setId(val);
  }

  return <div>
      <div className={Weather_leftpanecss.main}>
        <div id={Weather_leftpanecss.item_1}>Weather</div>
        <div id={Weather_leftpanecss.item_2}>
          <input type="text" placeholder='Search for city..' />
        </div>
        <div id={Weather_leftpanecss.item_3}>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_1">
            Cities
          </div>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_2" onClick={() => togglearrow('item_3_2')} >
            {valuestate && id == 'item_3_2' ? KeyboardArrowUpIcon : KeyboardArrowDownIcon }
          </div>
        </div>
        <div id={Weather_leftpanecss.item_4}>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_1">
            Settings
          </div>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_2" onClick={() => togglearrow('item_4_1')}>
          {valuestate && id == 'item_4_1' ? KeyboardArrowUpIcon : KeyboardArrowDownIcon }
          </div>
        </div>
      </div>

  </div>;
}

Here you can use one state to achieve that, saving in one state the status of both buttons, which one is clicked or not and render the icon based on that status.

the toggleArrow function gets the itemId and uses it to set the updated value of the button. We use !prevState[itemId] since if it is false it will become true and vise versa.

I took the liberty of giving the state a more informative name than a generic name.

import React, { useState } from "react";
import Weather_leftpanecss from "./Weather_leftpane.module.css";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";

export default function Weather_leftpane() {
  const [clickedButtons, setClickedButtons] = useState({
    item_3_2: false,
    item_4_2: false
  });

  const toggleArrow = (itemId) => {
    setClickedButtons((prevState) => ({
      ...prevState,
      [itemId]: !prevState[itemId]
    }));
  };

  return (
    <div>
      <div className={Weather_leftpanecss.main}>
        <div id={Weather_leftpanecss.item_1}>Weather</div>
        <div id={Weather_leftpanecss.item_2}>
          <input type="text" placeholder="Search for city.." />
        </div>
        <div id={Weather_leftpanecss.item_3}>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_1">
            Cities
          </div>
          <div
            className={Weather_leftpanecss.item_3_content}
            id="item_3_2"
            onClick={() => toggleArrow("item_3_2")}
          >
            {clickedButtons["item_3_2"] ? (
              <KeyboardArrowUpIcon />
            ) : (
              <KeyboardArrowDownIcon />
            )}
          </div>
        </div>
        <div id={Weather_leftpanecss.item_4}>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_1">
            Settings
          </div>
          <div
            className={Weather_leftpanecss.item_4_content}
            id="item_4_2"
            onClick={() => toggleArrow("item_4_2")}
          >
            {clickedButtons["item_4_2"] ? (
              <KeyboardArrowUpIcon />
            ) : (
              <KeyboardArrowDownIcon />
            )}
          </div>
        </div>
      </div>
    </div>
  );
}