eu queria que o acordeaõ ficasse nesse lugar, mas dentro do formulario, como eu faço isso?
import React, { useState } from "react";
import "./Clientes.css";
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import {
  TextField,
  Select,
  MenuItem,
  InputLabel,
  FormControl,
  Button,
  Chip,
} from "@mui/material";

function ClientesFisica() {
  const [nome, setNome] = useState("");
  const [numero, setNumero] = useState("");
  const [categoria, setCategoria] = useState<string[]>([]);
  const [birthDate, setBirthDate] = useState("");
  const [gender, setGender] = useState("");
  const [cpf, setCpf] = useState("");
  const [cellphone, setCellphone] = useState("");
  const [email, setEmail] = useState("");
  const [website, setWebsite] = useState("");
  const [observations, setObservations] = useState("");
  const [photoPreview, setPhotoPreview] = useState<string | undefined>(
    undefined
  );

  const handlePhotoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPhotoPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // Lógica para enviar os dados do formulário
  };

  return (
    <div className="div-cadastro  ">
      <form className="formulario" onSubmit={handleSubmit}>
        <div className="formulario-inputs">
          <div className="formulario-inputs-row">
            <TextField
              label="Nome"
              value={nome}
              onChange={(e) => setNome(e.target.value)}
              fullWidth
              variant="outlined"
            />
            <TextField
              label="Número"
              value={numero}
              onChange={(e) => setNumero(e.target.value)}
              fullWidth
              variant="outlined"
            />
          </div>

          <div className="formulario-inputs-row">
            <FormControl fullWidth variant="outlined">
              <InputLabel id="categoria-label">Categoria</InputLabel> 
              <Select
                multiple
                labelId="categoria-label"
                value={categoria}
                label="Categoria"
                onChange={(e) => setCategoria(e.target.value as string[])}
                renderValue={(selected) => (  
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {selected.map((value) => (
                      <Chip key={value} label={value} sx={{
                        backgroundColor: '#fbfbfb', // Fundo branco
                        color: '#000',           // Texto preto
                        border: '1px solid #ccc',
                      }} />
                    ))}
                  </div>
                )}  
                >
                  <em style={{ display: "flex", justifyContent: "center"}}>Selecione</em>
                <MenuItem value="categoria1">Categoria 1</MenuItem>
                <MenuItem value="categoria2">Categoria 2</MenuItem>
                <MenuItem value="categoria3">Categoria 3</MenuItem>
              </Select>
            </FormControl>

            <TextField
              label="Data de Nascimento"
              type="date"
              value={birthDate}
              onChange={(e) => setBirthDate(e.target.value)}
              InputLabelProps={{
                shrink: true,
              }}
              fullWidth
              variant="outlined"
            />

            <FormControl fullWidth variant="outlined">
              <InputLabel id="gender-label">Gênero</InputLabel>
              <Select
                labelId="gender-label"
                value={gender}
                label="Gênero"
                onChange={(e) => setGender(e.target.value as string)}
              >
                <MenuItem value="">
                  <em>Selecione</em>
                </MenuItem>
                <MenuItem value="masculino">Masculino</MenuItem>
                <MenuItem value="feminino">Feminino</MenuItem>
                <MenuItem value="outro">Outro</MenuItem>
              </Select>
            </FormControl>
          </div>

          <div className="formulario-inputs-row">
            <TextField
              label="CPF"
              value={cpf}
              onChange={(e) => setCpf(e.target.value)}
              fullWidth
              variant="outlined"
            />
            <TextField
              label="Celular"
              value={cellphone}
              onChange={(e) => setCellphone(e.target.value)}
              fullWidth
              variant="outlined"
            />
          </div>

          <div className="formulario-inputs-row">
            <TextField
              label="Email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              fullWidth
              variant="outlined"
            />
            <TextField
              label="Site"
              type="url"
              value={website}
              onChange={(e) => setWebsite(e.target.value)}
              fullWidth
              variant="outlined"
            />
          </div>

          <div
            className="formulario-inputs-row"
            style={{ flexDirection: "column" }}
          >
            <TextField
              label="Observações"
              value={observations}
              onChange={(e) => setObservations(e.target.value)}
              fullWidth
              multiline
              rows={4}
              variant="outlined"
            />
          </div>
        </div>

        <div className="formulario-img">
          <div
            className="photo-section"
            onClick={() => document.getElementById("photo-input")?.click()}
          >
            <input
              type="file"
              id="photo-input"
              style={{ display: "none" }}
              accept="image/*"
              onChange={handlePhotoChange}
            />
            <div
              className="photo-preview"
              style={{ width: "100%", height: "100%" }}
            >
              {photoPreview ? (
                <img
                  src={photoPreview}
                  alt="Pré-visualização da foto"
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                  }}
                />
              ) : (
                <span style={{ color: "#fff" }}>
                  Clique para adicionar uma foto
                </span>
              )}
            </div>
          </div>
          <Button variant="contained" type="submit">
            Enviar
          </Button>
        </div>
      </form>
        <Accordion className="">
          <AccordionSummary>
            Acordeão
          </AccordionSummary>
          <AccordionDetails>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget.
          </AccordionDetails>
        </Accordion>
    </div>  
  );
}

export default ClientesFisica;
@media (prefers-color-scheme: dark){
  .formulario {
    display: flex;
  }

  .formulario-inputs {
    flex: 2;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
  }

  .formulario-inputs-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
  }

  .formulario-inputs-row > .MuiFormControl-root,
  .formulario-inputs-row > .MuiTextField-root {
    flex: 1;
  }

  .formulario-img {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .photo-section {
    border: 2px dashed #666;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    width: 200px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #222;
  }

  .photo-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  button,
  .MuiButton-root {
    padding: 0.75rem 1.5rem;
    background-color: #007bff !important;
    color: white !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 16px;
    text-transform: none;
  }

  button:hover,
  .MuiButton-root:hover {
    background-color: #0056b3 !important;
  }

  .MuiInputBase-input,
  .MuiInputLabel-root,
  .MuiSelect-icon {
    color: #fff !important;
  }

  .MuiOutlinedInput-root {
    background-color: #333 !important;
  }

  .MuiInputBase-root::after,
  .MuiInputBase-root::before {  
    border-bottom: 1px solid #fff !important;
  }

  .MuiFormLabel-root.Mui-focused {
    color: #007bff !important;
  }

  .MuiOutlinedInput-notchedOutline {
    border-color: #fff !important;
  }

  .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: #007bff !important;
  }

  .MuiRadio-root .MuiSvgIcon-root {
    fill: #fff;
  }

  .MuiFormControlLabel-label {
    color: #fff;
  }

  .tipoCadastroFormControl {
    padding: 10px; /* Ajuste o padding conforme necessário */
    margin-bottom: 20px;
    background-color: #333;
    border-radius: 8px;
  }
}
@media (prefers-color-scheme: light){
  .formulario {
    display: flex;
    padding: 20px;
    border-radius: 8px;
    /* Você pode   adicionar uma cor de fundo clara se desejar */
    /* background-color: #f9f9f9;   */
  }

  .formulario-inputs {
    flex: 2;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
  }

  .formulario-inputs-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
  }

  .formulario-inputs-row > .MuiFormControl-root,
  .formulario-inputs-row > .MuiTextField-root {
    flex: 1;
  }

  .formulario-img {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .photo-section {
    border: 2px dashed #ccc; /* Alterado de #666 para #ccc */
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    width: 200px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f7f7f7; /* Alterado de #222 para #f7f7f7 */
  }

  .photo-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  button,
  .MuiButton-root {
    padding: 0.75rem 1.5rem;
    background-color: #007bff !important;
    color: white !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 16px;
    text-transform: none;
  }

  button:hover,
  .MuiButton-root:hover {
    background-color: #0056b3 !important;
  }

  .MuiInputBase-input,
  .MuiInputLabel-root,
  .MuiSelect-icon {
    color: #000 !important; /* Alterado de #fff para #000 */
  }

  .MuiOutlinedInput-root {
    background-color: #fff !important; /* Alterado de #333 para #fff */
  }

  .MuiInputBase-root::after,
  .MuiInputBase-root::before {
    border-bottom: 1px solid #000 !important; /* Alterado de #fff para #000 */
  }

  .MuiFormLabel-root.Mui-focused {
    color: #007bff !important;
  }

  .MuiOutlinedInput-notchedOutline {
    border-color: #000 !important; /* Alterado de #fff para #000 */
  }

  .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: #007bff !important;
  }

  .MuiRadio-root .MuiSvgIcon-root {
    fill: #000; /* Alterado de #fff para #000 */
  }

  .MuiFormControlLabel-label {
    color: #000; /* Alterado de #fff para #000 */
  }

  .tipoCadastroFormControl {
    padding: 10px; /* Ajuste o padding conforme necessário */
    margin-bottom: 20px;
    background-color: #f7f7f7; /* Alterado de #333 para #f7f7f7 */
    border-radius: 8px;
  }
} 
.div-cadastro{
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 8px;
}