Wrongly Styled React Toast

Question

Im getting wrong styling for React Toast. Close button is too big, how do i customize it? Here is my Code signup.js Link for the Code: https://codesandbox.io/s/jolly-keldysh-ukogpn?file=/src/signup.js

import  Axios  from 'axios'
import React, { useState } from 'react'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import './main.css'

toast.configure()
export default function Signup() {

        const [name, setname] = useState('')
        const [email, setemail] = useState('')
        const [password, setpassword] = useState('')
        const [mobilenumber, setmobilenumber] = useState('')
        const [address, setaddress] = useState('')


    const togglepwdvis=(e)=>{
        let x=document.getElementById('pwdfield');
        if(x.type==='password')
        {
            x.type='text';
        }
        else
        {
            x.type='password';
        }
    }

    const handleregister=(e)=>{
        Axios.post('http://localhost:3001/registeruser',{
            name:name,
            email:email,
            password:password,
            mobilenumber:mobilenumber,
            address:address
        }).then(
            
            toast.success('Registered Successfully')
            
           
        )
        e.preventDefault();


    }

  return (
    <>

         <div class="page-wrapper bg-gra-01 p-t-170 p-b-80 font-poppins"   >
             <div></div><br />
        <div class="wrapper  wrapper--w960 "  style={{marginLeft:'240px'}} >
            <div class="card card-3" style={{width:'1000px'}}>
                <div class="card-heading"></div>
                <div class="card-body text-center" style={{width:'500px'}}  >
                    <h2 class="title">Registration </h2>
                    <form method="POST"  >
                        <div class="input-group">
                            <input class="input--style-3" type="text" onChange={e=>setname(e.target.value)} placeholder="Name" name="username" required />
                        </div>
                        
                        
                        <div class="input-group">
                            <input class="input--style-3" type="email" onChange={e=>setemail(e.target.value)} placeholder="Email" name="email"  required />
                        </div>

                        <div class="input-group" style={{display:'flex',alignItems:'center'}}>
                            <input class="input--style-3" id='pwdfield' onChange={e=>setpassword(e.target.value)}  type="password" placeholder="Password" name="password"  required />
                            
                            <a onClick={togglepwdvis}>
                            <span style={{color:'white',float: 'right',marginLeft: '-25px',marginTop: '0px',position: 'relative',zIndex:'  2'}}
                             toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>

                            </a>
                            
                        </div>


                        <div class="input-group">
                            <input class="input--style-3" type="text" onChange={e=>setmobilenumber(e.target.value)}  placeholder="Mobile Number" name="mobilenumber"  required />
                        </div>

                        <div class="input-group">
                            <input class="input--style-3 js-datepicker" onChange={e=>setaddress(e.target.value)}  type="text" placeholder="Address" name="address"  required />
                           
                        </div>

                        <div class="p-t-10 text-center">
                            <button class="btn btn--pill btn--green" onClick={handleregister} type="submit">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    </>
  )
}

Basically I show a toast when user registers successfully. But the Toast is just horrible. My Code for App.js

[![import Navbar from './components/Navbar';
import Homegif from './components/Homegif';
import {
  BrowserRouter as Router,

  Route,Routes
} from "react-router-dom";
import Signup from './components/Signup';
import Login from './components/Login';
import About from './components/About';

import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.configure();
function App() {
  return (
    <>
    
    <Router>
    <Navbar/>
    {/* <ToastContainer/> */}
    <Routes>
          <Route exact path="/" element={<Homegif/>}>
              
          </Route>

          <Route exact path="/" element={<About/>}>
              
          </Route>



          <Route exact path="/signup" element={<Signup/>}>
          
          </Route>

          <Route exact path="/login" element={<Login/>}>
            
          </Route>
      </Routes>




  
    </Router>
    
    </>
   
  );
}

export default App;][1]][1]

This is my code, where am i going wrong? IM writing this line only because of the warning stackoverflow gives me lol.