i want to toggle AND rotate the image with onClick= {setToggle} and {handleRotate}. it seems i am only able to render one or the other

function FAQs() {    
    function useToggle(initialState) {
        const [toggleValue, setToggleValue] = useState(initialState);
        const toggler = () => {
          setToggleValue(!toggleValue);
        };
        return [toggleValue, toggler];
      }
    const [toggle, setToggle] = useToggle();

//setToggle function

//rotateArrow function

    const [rotateArrow, setRotateArrow] = useState(false);
    const handleRotate = () => setRotateArrow(!rotateArrow);
    const rotate = rotateArrow ? "rotate(90deg)" : "rotate(0)"
        return (

                        <Question>First question goes here </Question>
//how do i get onClick event to setToggle AND rotate Arrow?
                        <ArrowRight onClick={handleRotate AND setToggle} style={{ transform: rotate }}><img className='arrow-right' src={process.env.PUBLIC_URL +"/images/newsAndPress/arrow-right.png"}/></ArrowRight>
                        {toggle && ( 
                            <Answer><p>"Question 1 Answer, consectetuer adipiscing elit, sed diam ut laoreet dolore magna aliquam facilisi."</p></Answer>
                        )}

>Solution :

Generally when you want to perform multiple operations what you’re looking for is a function in which you have multiple lines of code. For example:

onClick={() => {
  handleRotate();
  setToggle();
}}