import React from 'react'
import { useState } from 'react'

export default function About(props) {
    const [theme,setTheme] = useState(null)

    function toggle(option){
        if(option==="light"){
            setTheme({
                color:"black",
                backgroundColor:"white",
                width:"90%",
                marginInline:"auto"

            })
            console.log(theme,option==="light");

            // return theme
        }else if(option==="dark"){
            setTheme({
                color:"white",
                backgroundColor:"black",
                width:"90%",
                marginInline:"auto"
            })
            console.log(theme,option==="light");
            // return theme

        }else{
            setTheme({
                color:"white",
                backgroundColor:"#032f3c",
                width:"90%",
                marginInline:"auto"
            })
            console.log(theme,option==="light");
            // return theme
        }

    }
  return (
    <div >
        {toggle(props.theme)}
        <div class="accordion" id="accordionExample" >
            <div class="accordion-item" style={theme}>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample" >
                <div class="accordion-body" >
                    /content/
                </div>
                </div>
            </div>

I am trying to change the theme of the page depending on what (props.theme) value is
but when i call the function toggle in return it ‘say render too many times’ but without calling function this functional component displays on the page with default values of bootstrap framework.

Also, if the toggle function is called outside the return it works properly may i know why this is happening that calling the function inside return the function calls infinitely and not when outside